-
Notifications
You must be signed in to change notification settings - Fork 394
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(wire-service): rfc implementation #166
Changes from 41 commits
d286bee
8b1dfc2
9000634
f5ae6e9
7fee5b4
f6aea16
4be7d46
551fbd2
8ecb303
873a280
05833f4
eef11f0
2a13a36
d4279f8
303f6a2
df5356f
1b50bfa
8a84e55
c15dd48
18603ca
ae06763
07a327c
83f6e98
112c99e
fab305d
986a70c
b517417
bba3915
25c519a
2606fa7
da52252
baf5daa
e249b23
458b307
d1e0f67
218ac44
36f1682
24878bb
7cf9db4
a26ed12
b201fc1
81a3016
0e5dbd1
6767eb1
d7623ff
4812f30
1ee0796
a42f70a
d922d93
d2ee1c6
bd00213
abc8aca
d234b6a
f85f8c9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,12 @@ | ||
import { Element, api, track, wire } from 'engine'; | ||
import { serviceTodo } from 'todo'; | ||
import { getTodo } from 'todo'; | ||
|
||
export default class WiredMethod extends Element { | ||
@api todoId; | ||
@track state = { error: undefined, todo: undefined }; | ||
|
||
@wire(serviceTodo, { id: '$todoId' }) | ||
function(error, data) { | ||
@wire(getTodo, { id: '$todoId' }) | ||
function({error, data}) { | ||
this.state = { error: error, todo: data }; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,15 +9,44 @@ exports.app = function (cmpName) { | |
|
||
exports.todoApp = function (cmpName) { | ||
return ` | ||
import { serviceTodo } from 'todo'; | ||
import registerWireService from 'wire-service'; | ||
import { registerWireService, register as registerAdapter, ValueChangedEvent } from 'wire-service'; | ||
import { createElement, register } from 'engine'; | ||
import Cmp from '${cmpName}'; | ||
import { getTodo, getObservable } from 'todo'; | ||
|
||
registerWireService(register, function () { | ||
return { | ||
serviceTodo | ||
registerWireService(register); | ||
|
||
// Register the wire adapter for @wire(getTodo). | ||
registerAdapter(getTodo, function getTodoWireAdapter(wiredEventTarget) { | ||
let subscription; | ||
let config; | ||
wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data: undefined, error: undefined })); | ||
const observer = { | ||
next: data => wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data, error: undefined })), | ||
error: error => wiredEventTarget.dispatchEvent(new ValueChangedEvent({ data: undefined, error })) | ||
}; | ||
wiredEventTarget.addEventListener('connect', () => { | ||
const observable = getObservable(config); | ||
if (observable) { | ||
subscription = observable.subscribe(observer); | ||
return; | ||
} | ||
}); | ||
wiredEventTarget.addEventListener('disconnect', () => { | ||
subscription.unsubscribe(); | ||
}); | ||
wiredEventTarget.addEventListener('config', (newConfig) => { | ||
config = newConfig; | ||
if (subscription) { | ||
subscription.unsubscribe(); | ||
subscription = undefined; | ||
} | ||
const observable = getObservable(config); | ||
if (observable) { | ||
subscription = observable.subscribe(observer); | ||
return; | ||
} | ||
}); | ||
}); | ||
|
||
const element = createElement('${cmpName}', { is: Cmp }); | ||
|
@@ -57,7 +86,7 @@ exports.wireServiceHtml = function (cmpName, isCompat) { | |
${isCompat ? COMPAT : ''} | ||
<script src="../../shared/engine.js"></script> | ||
<script src="../../shared/todo.js"></script> | ||
<script src="../../shared/wire-service.js"></script> | ||
<script src="../../shared/wire.js"></script> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What's this point to? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See comment below about file name of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it'll be a copy from the |
||
<script src="./${cmpName}.js"></script> | ||
</body> | ||
</html> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,81 +5,84 @@ | |
}(this, (function (exports) { | ||
'use strict'; | ||
|
||
function getSubject(initialValue, initialError) { | ||
var observer; | ||
function getSubject(initialValue, initialError) { | ||
var observer; | ||
|
||
function next(value) { | ||
observer.next(value); | ||
} | ||
function next(value) { | ||
observer.next(value); | ||
} | ||
|
||
function error(err) { | ||
observer.error(err); | ||
} | ||
function error(err) { | ||
observer.error(err); | ||
} | ||
|
||
function complete() { | ||
observer.complete(); | ||
} | ||
function complete() { | ||
observer.complete(); | ||
} | ||
|
||
var observable = { | ||
subscribe: function(obs) { | ||
observer = obs; | ||
if (initialValue) { | ||
next(initialValue); | ||
} | ||
if (initialError) { | ||
error(initialError); | ||
var observable = { | ||
subscribe: function(obs) { | ||
observer = obs; | ||
if (initialValue) { | ||
next(initialValue); | ||
} | ||
if (initialError) { | ||
error(initialError); | ||
} | ||
return { | ||
unsubscribe: function() {} | ||
}; | ||
} | ||
return { | ||
unsubscribe: function() {} | ||
}; | ||
} | ||
}; | ||
}; | ||
|
||
return { | ||
next: next, | ||
error: error, | ||
complete: complete, | ||
observable: observable | ||
}; | ||
} | ||
return { | ||
next: next, | ||
error: error, | ||
complete: complete, | ||
observable: observable | ||
}; | ||
} | ||
|
||
function generateTodo(id, completed) { | ||
return { | ||
id: id, | ||
title: 'task ' + id, | ||
completed: completed | ||
}; | ||
} | ||
function generateTodo(id, completed) { | ||
return { | ||
id: id, | ||
title: 'task ' + id, | ||
completed: completed | ||
}; | ||
} | ||
|
||
var TODO = [ | ||
generateTodo(0, true), | ||
generateTodo(1, false), | ||
// intentionally skip 2 | ||
generateTodo(3, true), | ||
generateTodo(4, true), | ||
// intentionally skip 5 | ||
generateTodo(6, false), | ||
generateTodo(7, false) | ||
].reduce(function(acc, value) { | ||
acc[value.id] = value; | ||
return acc; | ||
}, {}); | ||
var TODO = [ | ||
generateTodo(0, true), | ||
generateTodo(1, false), | ||
// intentionally skip 2 | ||
generateTodo(3, true), | ||
generateTodo(4, true), | ||
// intentionally skip 5 | ||
generateTodo(6, false), | ||
generateTodo(7, false) | ||
].reduce(function(acc, value) { | ||
acc[value.id] = value; | ||
return acc; | ||
}, {}); | ||
|
||
|
||
function serviceTodo(config) { | ||
if (!('id' in config)) { | ||
return undefined; | ||
} | ||
function getObservable(config) { | ||
if (!config || !('id' in config)) { | ||
return undefined; | ||
} | ||
|
||
var todo = TODO[config.id]; | ||
if (!todo) { | ||
var subject = getSubject(undefined, { message: 'Todo not found' }); | ||
return subject.observable; | ||
} | ||
|
||
var todo = TODO[config.id]; | ||
if (!todo) { | ||
var subject = getSubject(undefined, { message: 'Todo not found' }); | ||
return subject.observable; | ||
return getSubject(todo).observable; | ||
} | ||
|
||
return getSubject(todo).observable; | ||
} | ||
const getTodo = Symbol('getTodo'); | ||
|
||
exports.serviceTodo = serviceTodo; | ||
exports.getTodo = getTodo; | ||
exports.getObservable = getObservable; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It's weird you export this. But it's also weird that the wire registration happens in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the reason behind this is that i'm lazy to come up with the compat version of |
||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
}))); | ||
}))); |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this go into
todo.js
so it better reflects how adapters will be structured and doesn't clutter this template?