yonote/yjs
24
0
Fork 0
Code Pull Requests 1 Releases Activity

fix examples for Yjs@13

Browse Source
This commit is contained in:
Kevin Jahns 2018-01-25 17:28:33 -07:00
parent 1d4f283955
commit 41a88dbc43
28 changed files with 202 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/ace/index.html
View File

@ -24,7 +24,8 @@
<body> <body>
<div id="aceContainer"></div> <div id="aceContainer"></div>
<script src="../bower_components/yjs/y.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../bower_components/ace-builds/src/ace.js"></script> <script src="../bower_components/ace-builds/src/ace.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>

17
examples/ace/index.js
View File

@ -1,18 +1,12 @@
/* global Y, ace */ /* global Y, ace */
Y({ let y = new Y('ace-example', {
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'ace-example' url: 'http://127.0.0.1:1234'
},
sourceDir: '/bower_components',
share: {
ace: 'Text' // y.share.textarea is of type Y.Text
} }
}).then(function (y) { })
window.yAce = y window.yAce = y
// bind the textarea to a shared text element // bind the textarea to a shared text element
@ -20,5 +14,4 @@ Y({
editor.setTheme('ace/theme/chrome') editor.setTheme('ace/theme/chrome')
editor.getSession().setMode('ace/mode/javascript') editor.getSession().setMode('ace/mode/javascript')
y.share.ace.bindAce(editor) y.define('ace', Y.Text).bindAce(editor)
})

2
examples/chat/index.html
View File

@ -13,7 +13,7 @@
<input type="submit" value="Send"> <input type="submit" value="Send">
</form> </form>
<script src="../../y.js"></script> <script src="../../y.js"></script>
<script src="../../../y-websockets-client/dist/y-websockets-client.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

20
examples/chat/index.js
View File

@ -1,10 +1,9 @@
/* global Y */ /* global Y */
// initialize a shared object. This function call returns a promise! let y = new Y('chat-example', {
var y = new Y({
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'chat-example' url: 'http://127.0.0.1:1234'
} }
}) })
@ -23,6 +22,7 @@ function appendMessage (message, position) {
p.appendChild(document.createTextNode(message.message)) p.appendChild(document.createTextNode(message.message))
chatcontainer.insertBefore(p, chatcontainer.children[position] || null) chatcontainer.insertBefore(p, chatcontainer.children[position] || null)
} }
// This function makes sure that only 7 messages exist in the chat history. // This function makes sure that only 7 messages exist in the chat history.
// The rest is deleted // The rest is deleted
function cleanupChat () { function cleanupChat () {
@ -30,23 +30,17 @@ function cleanupChat () {
chatprotocol.delete(0, chatprotocol.length - 7) chatprotocol.delete(0, chatprotocol.length - 7)
} }
} }
cleanupChat()
// Insert the initial content // Insert the initial content
chatprotocol.toArray().forEach(appendMessage) chatprotocol.toArray().forEach(appendMessage)
cleanupChat()
// whenever content changes, make sure to reflect the changes in the DOM // whenever content changes, make sure to reflect the changes in the DOM
chatprotocol.observe(function (event) { chatprotocol.observe(function (event) {
if (event.type === 'insert') {
for (let i = 0; i < event.length; i++) {
appendMessage(event.values[i], event.index + i)
}
} else if (event.type === 'delete') {
for (let i = 0; i < event.length; i++) {
chatcontainer.children[event.index].remove()
}
}
// concurrent insertions may result in a history > 7, so cleanup here // concurrent insertions may result in a history > 7, so cleanup here
cleanupChat() cleanupChat()
chatcontainer.innerHTML = ''
chatprotocol.toArray().forEach(appendMessage)
}) })
document.querySelector('#chatform').onsubmit = function (event) { document.querySelector('#chatform').onsubmit = function (event) {
// the form is submitted // the form is submitted

3
examples/codemirror/index.html
View File

@ -5,7 +5,8 @@
<body> <body>
<div id="codeMirrorContainer"></div> <div id="codeMirrorContainer"></div>
<script src="../bower_components/yjs/y.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../bower_components/codemirror/lib/codemirror.js"></script> <script src="../bower_components/codemirror/lib/codemirror.js"></script>
<script src="../bower_components/codemirror/mode/javascript/javascript.js"></script> <script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css"> <link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css">

18
examples/codemirror/index.js
View File

@ -1,24 +1,16 @@
/* global Y, CodeMirror */ /* global Y, CodeMirror */
// initialize a shared object. This function call returns a promise! let y = new Y('codemirror-example', {
Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'codemirror-example' url: 'http://127.0.0.1:1234'
},
sourceDir: '/bower_components',
share: {
codemirror: 'Text' // y.share.codemirror is of type Y.Text
} }
}).then(function (y) { })
window.yCodeMirror = y window.yCodeMirror = y
var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), { var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
mode: 'javascript', mode: 'javascript',
lineNumbers: true lineNumbers: true
}) })
y.share.codemirror.bindCodeMirror(editor) y.define('codemirror', Y.Text).bindCodeMirror(editor)
})

3
examples/drawing/index.html
View File

@ -12,7 +12,8 @@
</style> </style>
<button type="button" id="clearDrawingCanvas">Clear Drawing</button> <button type="button" id="clearDrawingCanvas">Clear Drawing</button>
<svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg> <svg id="drawingCanvas" viewbox="0 0 100 100" width="100%"></svg>
<script src="../yjs-dist.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../bower_components/d3/d3.min.js"></script> <script src="../bower_components/d3/d3.min.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>

6
examples/drawing/index.js
View File

@ -1,11 +1,9 @@
/* globals Y, d3 */ /* globals Y, d3 */
let y = new Y({ let y = new Y('drawing-example', {
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
url: 'http://127.0.0.1:1234', url: 'http://127.0.0.1:1234'
room: 'drawing-example'
// maxBufferLength: 100
} }
}) })

3
examples/html-editor-drawing-hook/index.html
View File

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
</head> </head>
<script src="../yjs-dist.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../bower_components/d3/d3.min.js"></script> <script src="../bower_components/d3/d3.min.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
<style> <style>

8
examples/html-editor-drawing-hook/index.js
View File

@ -107,15 +107,13 @@ Y.XmlHook.addHook('magic-drawing', {
} }
}) })
// initialize a shared object. This function call returns a promise! let y = new Y('html-editor-drawing-hook-example', {
let y = new Y({
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
url: 'http://127.0.0.1:1234', url: 'http://127.0.0.1:1234'
room: 'html-editor-example6'
// maxBufferLength: 100
} }
}) })
window.yXml = y window.yXml = y
window.yXmlType = y.define('xml', Y.XmlFragment) window.yXmlType = y.define('xml', Y.XmlFragment)
window.undoManager = new Y.utils.UndoManager(window.yXmlType, { window.undoManager = new Y.utils.UndoManager(window.yXmlType, {

3
examples/html-editor/index.html
View File

@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
</head> </head>
<script src="../yjs-dist.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</head> </head>
<body contenteditable="true"> <body contenteditable="true">

12
examples/html-editor/index.js
View File

@ -4,18 +4,14 @@ window.onload = function () {
window.yXmlType.bindToDom(document.body) window.yXmlType.bindToDom(document.body)
} }
const persistence = new Y.IndexedDB()
// initialize a shared object. This function call returns a promise!
let y = new Y('htmleditor', { let y = new Y('htmleditor', {
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
url: 'http://127.0.0.1:1234', url: 'http://127.0.0.1:1234'
room: 'html-editor'
// maxBufferLength: 100
} }
}, persistence) })
window.yXml = y
window.y = y
window.yXmlType = y.define('xml', Y.XmlFragment) window.yXmlType = y.define('xml', Y.XmlFragment)
window.undoManager = new Y.utils.UndoManager(window.yXmlType, { window.undoManager = new Y.utils.UndoManager(window.yXmlType, {
captureTimeout: 500 captureTimeout: 500

5
examples/indexeddb/index.html
View File

@ -16,6 +16,9 @@
width: 100%; width: 100%;
} }
</style> </style>
<script type="module" src="./index.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src='../../../y-indexeddb/y-indexeddb.js'></script>
<script src="./index.js"></script>
</body> </body>
</html> </html>

7
examples/indexeddb/index.js
View File

@ -7,12 +7,13 @@ const connector = {
room: 'codemirror-example' room: 'codemirror-example'
} }
} }
// initialize a shared object. This function call returns a promise!
const y = Y('codemirror-example', connector, persistence) const y = new Y('codemirror-example', connector, persistence)
window.yCodeMirror = y window.yCodeMirror = y
var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), { var editor = CodeMirror(document.querySelector('#codeMirrorContainer'), {
mode: 'javascript', mode: 'javascript',
lineNumbers: true lineNumbers: true
}) })
y.share.codemirror.bindCodeMirror(editor)
y.define('codemirror', Y.Text).bindCodeMirror(editor)

5
examples/infiniteyjs/index.html
View File

@ -49,10 +49,7 @@
</div> </div>
</div> </div>
<script src="../../y.js"></script> <script src="../../y.js"></script>
<script src="../../../y-array/y-array.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../../../y-text/dist/y-text.js"></script>
<script src="../../../y-memory/y-memory.js"></script>
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

76
examples/infiniteyjs/index.js
View File

@ -1,64 +1,38 @@
/* global Y */ /* global Y */
Y({ function bindYjsInstance (y, suffix) {
db: { y.define('textarea', Y.Text).bind(document.getElementById('textarea' + suffix))
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'Textarea-example',
url: 'https://yjs-v13.herokuapp.com/'
},
share: {
textarea: 'Text'
}
}).then(function (y) {
window.y1 = y
y.share.textarea.bind(document.getElementById('textarea1'))
})
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'Textarea-example',
url: 'https://yjs-v13-second.herokuapp.com/'
},
share: {
textarea: 'Text'
}
}).then(function (y) {
window.y2 = y
y.share.textarea.bind(document.getElementById('textarea2'))
y.connector.socket.on('connection', function () { y.connector.socket.on('connection', function () {
document.getElementById('container2').removeAttribute('disconnected') document.getElementById('container' + suffix).removeAttribute('disconnected')
}) })
y.connector.socket.on('disconnect', function () { y.connector.socket.on('disconnect', function () {
document.getElementById('container2').setAttribute('disconnected', true) document.getElementById('container' + suffix).setAttribute('disconnected', true)
})
}) })
}
Y({ let y1 = new Y('infinite-example', {
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'Textarea-example', url: 'http://127.0.0.1:1234'
url: 'https://yjs-v13-third.herokuapp.com/'
},
share: {
textarea: 'Text'
} }
}).then(function (y) {
window.y3 = y
y.share.textarea.bind(document.getElementById('textarea3'))
y.connector.socket.on('connection', function () {
document.getElementById('container3').removeAttribute('disconnected')
}) })
y.connector.socket.on('disconnect', function () { window.y1 = y1
document.getElementById('container3').setAttribute('disconnected', true) bindYjsInstance(y1, '1')
let y2 = new Y('infinite-example', {
connector: {
name: 'websockets-client',
url: 'http://127.0.0.1:1234'
}
}) })
window.y2 = y2
bindYjsInstance(y2, '2')
let y3 = new Y('infinite-example', {
connector: {
name: 'websockets-client',
url: 'http://127.0.0.1:1234'
}
}) })
window.y3 = y3
bindYjsInstance(y1, '3')

4
examples/jigsaw/index.html
View File

@ -17,9 +17,7 @@
</g> </g>
</svg> </svg>
<script src="../../y.js"></script> <script src="../../y.js"></script>
<script src="../../../y-map/dist/y-map.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../../../y-memory/y-memory.js"></script>
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
<script src="../bower_components/d3/d3.js"></script> <script src="../bower_components/d3/d3.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>

33
examples/jigsaw/index.js
View File

@ -1,24 +1,15 @@
/* @flow */
/* global Y, d3 */ /* global Y, d3 */
// initialize a shared object. This function call returns a promise! let y = new Y('jigsaw-example', {
Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'Puzzle-example', url: 'http://127.0.0.1:1234'
url: 'http://localhost:1234'
},
share: {
piece1: 'Map',
piece2: 'Map',
piece3: 'Map',
piece4: 'Map'
} }
}).then(function (y) { })
let jigsaw = y.define('jigsaw', Y.Map)
window.yJigsaw = y window.yJigsaw = y
var origin // mouse start position - translation of piece var origin // mouse start position - translation of piece
var drag = d3.behavior.drag() var drag = d3.behavior.drag()
.on('dragstart', function (params) { .on('dragstart', function (params) {
@ -47,10 +38,10 @@ Y({
var mouse = d3.mouse(this.parentNode) var mouse = d3.mouse(this.parentNode)
var x = mouse[0] - origin.x var x = mouse[0] - origin.x
var y = mouse[1] - origin.y var y = mouse[1] - origin.y
piece.set('translation', {x: x, y: y}) jigsaw.set(piece, {x: x, y: y})
}) })
var data = [y.share.piece1, y.share.piece2, y.share.piece3, y.share.piece4] var data = ['piece1', 'piece2', 'piece3', 'piece4']
var pieces = d3.select(document.querySelector('#puzzle-example')).selectAll('path').data(data) var pieces = d3.select(document.querySelector('#puzzle-example')).selectAll('path').data(data)
pieces pieces
@ -61,14 +52,16 @@ Y({
}).call(drag) }).call(drag)
data.forEach(function (piece) { data.forEach(function (piece) {
piece.observe(function () { jigsaw.observe(function () {
// whenever a property of a piece changes, update the translation of the pieces // whenever a property of a piece changes, update the translation of the pieces
pieces pieces
.transition() .transition()
.attr('transform', function (piece) { .attr('transform', function (piece) {
var translation = piece.get('translation') || {x: 0, y: 0} var translation = piece.get(piece)
if (translation == null || typeof translation.x !== 'number' || typeof translation.y !== 'number') {
translation = { x: 0, y: 0 }
}
return 'translate(' + translation.x + ',' + translation.y + ')' return 'translate(' + translation.x + ',' + translation.y + ')'
}) })
}) })
}) })
})

4
examples/monaco/index.html
View File

@ -13,8 +13,8 @@
width: 100%; width: 100%;
} }
</style> </style>
<script src="../bower_components/yjs/y.js"></script> <script src="../../y.js"></script>
<script src="../bower_components/y-websockets-client/y-websockets-client.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>

21
examples/monaco/index.js
View File

@ -2,21 +2,15 @@
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } }) require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } })
require(['vs/editor/editor.main'], function () { let y = new Y('monaco-example', {
// Initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'monaco-example' url: 'http://127.0.0.1:1234'
},
sourceDir: '/bower_components',
share: {
monaco: 'Text' // y.share.monaco is of type Y.Text
} }
}).then(function (y) { })
require(['vs/editor/editor.main'], function () {
window.yMonaco = y window.yMonaco = y
// Create Monaco editor // Create Monaco editor
@ -25,6 +19,5 @@ require(['vs/editor/editor.main'], function () {
}) })
// Bind to y.share.monaco // Bind to y.share.monaco
y.share.monaco.bindMonaco(editor) y.define('monaco', Y.Text).bindMonaco(editor)
})
}) })

5
examples/quill/index.html
View File

@ -26,10 +26,7 @@
<script src="../bower_components/quill/dist/quill.js"></script> <script src="../bower_components/quill/dist/quill.js"></script>
--> -->
<script src="../../y.js"></script> <script src="../../y.js"></script>
<script src="../../../y-array/y-array.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../../../y-richtext/dist/y-richtext.js"></script>
<script src="../../../y-memory/y-memory.js"></script>
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

4
examples/textarea/index.html
View File

@ -3,9 +3,7 @@
<body> <body>
<textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea> <textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<script src="../../y.js"></script> <script src="../../y.js"></script>
<script src="../../../y-array/y-array.js"></script> <script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="../../../y-text/y-text.js"></script>
<script src="../../../y-websockets-client/y-websockets-client.js"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

26
examples/textarea/index.js
View File

@ -1,23 +1,17 @@
/* global Y */ /* global Y */
// initialize a shared object. This function call returns a promise! let y = new Y('textarea-example', {
Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'Textarea-example2', url: 'http://127.0.0.1:1234'
// url: '//localhost:1234', }
url: 'https://yjs-v13.herokuapp.com/' })
},
share: {
textarea: 'Text'
},
timeout: 5000 // reject if no connection was established within 5 seconds
}).then(function (y) {
window.yTextarea = y window.yTextarea = y
// bind the textarea to a shared text element // bind the textarea to a shared text element
y.share.textarea.bind(document.getElementById('textfield')) let type = y.define('textarea', Y.Text)
}) let textarea = document.getElementById('textfield')
let binding = new Y.TextareaBinding(type, textarea)
// binding.destroy()

3
examples/xml/index.html
View File

@ -3,7 +3,8 @@
</head> </head>
<!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. --> <!-- jquery is not required for y-xml. It is just here for convenience, and to test batch operations. -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../yjs-dist.js"></script> <script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</head> </head>
<body> <body>

20
examples/xml/index.js
View File

@ -1,23 +1,13 @@
/* global Y */ /* global Y */
// initialize a shared object. This function call returns a promise! let y = new Y('xml-example', {
Y({
db: {
name: 'memory'
},
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
// url: 'http://127.0.0.1:1234', url: 'http://127.0.0.1:1234'
url: 'http://192.168.178.81:1234',
room: 'Xml-example'
},
sourceDir: '/bower_components',
share: {
xml: 'Xml("p")' // y.share.xml is of type Y.Xml with tagname "p"
} }
}).then(function (y) { })
window.yXml = y window.yXml = y
// bind xml type to a dom, and put it in body // bind xml type to a dom, and put it in body
window.sharedDom = y.share.xml.getDom() window.sharedDom = y.define('xml', Y.XmlElement).getDom()
document.body.appendChild(window.sharedDom) document.body.appendChild(window.sharedDom)
})

4
src/Struct/Item.js
View File

@ -113,9 +113,11 @@ export default class Item {
* - Check if this is struct deleted * - Check if this is struct deleted
*/ */
_integrate (y) { _integrate (y) {
y._transaction.newTypes.add(this)
const parent = this._parent const parent = this._parent
const selfID = this._id const selfID = this._id
const userState = selfID === null ? 0 : y.ss.getState(selfID.user) const user = selfID === null ? y.userID : selfID.user
const userState = y.ss.getState(user)
if (selfID === null) { if (selfID === null) {
this._id = y.ss.getNextID(this._length) this._id = y.ss.getNextID(this._length)
} else if (selfID.user === RootFakeUserID) { } else if (selfID.user === RootFakeUserID) {

1
src/Struct/Type.js
View File

@ -133,7 +133,6 @@ export default class Type extends Item {
this._deepEventHandler.removeEventListener(f) this._deepEventHandler.removeEventListener(f)
} }
_integrate (y) { _integrate (y) {
y._transaction.newTypes.add(this)
super._integrate(y) super._integrate(y)
this._y = y this._y = y
// when integrating children we must make sure to // when integrating children we must make sure to

6
src/Type/YArray.js
View File

@ -9,8 +9,10 @@ class YArrayEvent extends YEvent {
super(yarray) super(yarray)
this.remote = remote this.remote = remote
this._transaction = transaction this._transaction = transaction
this._addedElements = null
} }
get addedElements () { get addedElements () {
if (this._addedElements === null) {
const target = this.target const target = this.target
const transaction = this._transaction const transaction = this._transaction
const addedElements = new Set() const addedElements = new Set()
@ -19,7 +21,9 @@ class YArrayEvent extends YEvent {
addedElements.add(type) addedElements.add(type)
} }
}) })
return addedElements this._addedElements = addedElements
}
return this._addedElements
} }
get removedElements () { get removedElements () {
const target = this.target const target = this.target