I am reading vuejs source code, and got confused by these two lines of code:
const args = toArray(arguments, 1)
args.unshift(this)
in the following snippet, why bother do this ?
/* #flow */
import { toArray } from '../util/index'
export function initUse (Vue: GlobalAPI) {
Vue.use = function (plugin: Function | Object) {
/* istanbul ignore if */
if (plugin.installed) {
return
}
// additional parameters
const args = toArray(arguments, 1)
args.unshift(this)
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else {
plugin.apply(null, args)
}
plugin.installed = true
return this
}
}
Since you are inside of a Vueinstance, the lines in question are in the function defined on Vue.use the this most likely will reference the current Vue instance.
You will have to browse the source of toArray to understand the first line, it might takes the arguments and returning an array from them, and maybe substracting the first argument (the 1 in toArray(arguments, 1) give me this impression but to be sure browse the source of that function).
But then when the call args.unshift(this)comes it puts the Vue instance as the first element of the args array which is then used to provide arguments to the plugin function.
Hope that helps ;-)
Seb
Related
I am looking for a way to overwrite expect method for TestController. My idea is existing tests whoever used t.expect method, I want to perform additional steps in those cases.
I came up with below sample code but testcafe runtime fails with below error
TypeError: Cannot read property '_expect$' of undefined
sample code attempting to override:
import { Selector } from "testcafe";
fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;
test("My first test", async (t) => {
t = modify(t);
await t.typeText("#developer-name", "John Smith").click("#submit-button");
// Use the assertion to check if the actual header text is equal to the expected one
await t
.expect(Selector("#article-header").innerText)
.eql("Thank you, John Smith!");
});
function modify(t) {
let prevExpect = t.expect;
t.expect = (param) => {
console.log("modified expecte has been used");
return prevExpect(param);
};
return t;
}
Also, when using t.click(Selector(...).expect(...), It doesn't use my overwritten expect. How to make it work in the call chain as well?
Technically, it's possible to overwrite the expect method, but please note that this approach may lead to incorrect work and unexpected errors.
You need to modify your modify function as follows:
function modify (t) {
let prevExpect = t.expect;
t.expect = (param) => {
console.log("modified expect has been used");
return prevExpect.call(t, param);
};
return t;
}
As for the t.click(Selector(...).expect(...) issue, you call the expect method of Selector, but Selector does not have the expect method.
You need to add ) after Selector:
await t.click(Selector(...)).expect(...)
I have two Vue components that have a "save to disk" call on every change of data, it is loaded into these components via a mixin and each component save into a different file, so they must function independently (only trigger a debounce reset on its own change of data). To prevent too much writing to the disk. Here's my debound function:
function debounce(fn, delay) {
var timeoutID = null;
return function () {
console.log("clearing " + timeoutID)
clearTimeout(timeoutID);
var args = arguments;
var that = this;
timeoutID = setTimeout(() => fn.apply(that, args), delay);
};
}
Here's the methods on my mixin that the components inherit:
methods: {
saveData: debounce(function(){
console.log('saving widget: ' + this.$parent.widget.id);
this.saver.store = this.persisted;
}, 5000),
},
It works well when I'm changing data on one or the other component, but when I change data on one and before debounce ends I change on the other, it cancels my debounce function from the first one, and only saves the second component data.
What am I missing here?
I've encountered the same issue today. I've tried something else that is, in my opinion, a bit cleaner. Instead of defining the debounced function within the methods block like you did, try defining it as part of the data like so:
data() {
return {
saveData: debounce(function(){
console.log('saving widget: ' + this.$parent.widget.id);
this.saver.store = this.persisted;
}, 5000)
}
}
You can call the method the same way as you would normally. From the docs: "A component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object." This way, each instance that uses the debounce function will have it's own unique instance of it.
More on how this works can be found here: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
That's because each component instance shares the same debounced function, only the context (this, that) is varying.
A simple workaround would be to change your debounce implementation to
function debounce(fn, delay) {
var thatUidToTimeoutID = {};
return function () {
var args = arguments;
var that = this;
clearTimeout(thatUidToTimeoutID[that._uid]);
thatUidToTimeoutID[that._uid] = setTimeout(() => fn.apply(that, args), delay);
};
}
_uid is holding an unique id of each component, it's more of an internal property (hence it's weird key) but it should be good enough.
I want to use Frida to add a class method to the existing Objective C class on Mac OS. After I read the Frida docs, I tried the following code:
const NSString = ObjC.classes.NSString
function func (n) { console.log(n) }
var nativeCb = new NativeCallback(func, 'void', ['int'])
ObjC.api.class_addMethod(
NSString.handle,
ObjC.selector('onTest:'),
nativeCb,
ObjC.api.method_getTypeEncoding(nativeCb)
)
The above code looks straightforward. However, after the ObjC.api.class_addMethod() call, the attached App and the Frida REPL both froze, it looks that the pointers are not right.
I have tried many possible parameter values for a whole night but still can figure the problem out. What's wrong with my code?
Only two issues:
method_getTypeEncoding() can only be called on a Method, which the NativeCallback is not. You could pass it the handle of an existing Objective-C method that has the same signature as the one you're adding, or use Memory.allocUtf8String() to specify your own signature from scratch.
Objective-C methods, at the C ABI level, have two implicit arguments preceding the method's arguments. These are:
self: The class/instance the method is being invoked on.
_cmd: The selector.
Here's a complete example in TypeScript:
const { NSAutoreleasePool, NSString } = ObjC.classes;
const onTest = new NativeCallback(onTestImpl, "void", ["pointer", "pointer", "int"]);
function onTestImpl(selfHandle: NativePointer, cmd: NativePointer, n: number): void {
const self = new ObjC.Object(selfHandle);
console.log(`-[NSString onTestImpl]\n\tself="${self.toString()}"\n\tn=${n}`);
}
function register(): void {
ObjC.api.class_addMethod(
NSString,
ObjC.selector("onTest:"),
onTest,
Memory.allocUtf8String("v#:i"));
}
function test(): void {
const pool = NSAutoreleasePool.alloc().init();
try {
const s = NSString.stringWithUTF8String_(Memory.allocUtf8String("yo"));
s.onTest_(42);
} finally {
pool.release();
}
}
function exposeToRepl(): void {
const g = global as any;
g.register = register;
g.test = test;
}
exposeToRepl();
You can paste it into https://github.com/oleavr/frida-agent-example, and then with one terminal running npm run watch you can load it into a running app using the REPL: frida -n Telegram -l _agent.js. From the REPL you can then call register() to plug in the new method, and test() to take it for a spin.
My Problem
I'm currently using Visual Code Studio, the lastest version. I'm trying to get the intellisense to show up for the methods on the instance created by a factory function. The methods are going to be applied via object composition (so added directly as properties on the object).
so the function that acts as a constructore basically returns:
function makeWrappedObj() {
var obj = { /* random data */ }; // Then add methods to obj
Object.keys(methods).forEach(key => a[key] = methods[key]; );
return obj;
}
var methods = {
/**
* Yay documentation
* #returns {Object}
*/
method1: function() { return null; }
};
var instance = makeWrappedObj();
instance.method1( // What documentation to show up here
instance. // and here
Is the basic idea. Here's someone doing something similar. I'll address that in the third possible solution.
Solutions I've tried
1) #class on makeWrappedObj I think only works if you attach methods on to makeWrappedObj.prototype which is not what I'm doing so that doesn't work. Unless I'm misunderstanding something.
2) #namespace solution
/* #namespace ClassName */
/* #returns {ClassName}
function createWrappedObj() {
var obj = { /* random data */ }; // Then add methods to obj
Object.keys(methods).forEach(key => a[key] = methods[key]; );
return obj;
}
var methods = {
/**
* Currently the soultion I'm using
* #memberof ClassName
* #param {number} a
**/
method1: function (a) {}
};
var instance = makeWrapperObj();
instance.method1( // Only shows documentation here
So this sort of works. The two problems are that:
methods on instances only get documentation when you type out the full instance.method( and not in the instance. case--not really a big deal
if you have a method name that is the same as an in-built function, eg. toString, instance.toString( will block any documentation you have from showing and show the native toString default documentation instaed.
3) #typedef like the link above.
/** Can be placed anywhere
* #typedef {ClassName}
* #property {function} method1
* dunno how to document arguments with this method
* but it gets the intellisense menu to pop up for "instance." after dot
*/
/* #returns {ClassName} */
function createdWrappedObject() {
var obj = { /* random data */ }; // Then add methods to obj
Object.keys(methods).forEach(key => a[key] = methods[key]; );
return obj;
}
var methods = {
method1: function (a) {}
};
var instance = makeWrappedObj();
instance. // Yay
instance.method1( // Doesn't work
Has the benefit of showing up when one types instance. however has a few disadvantages
Do not know how to specify arguments passed to method1. Maybe it's not possible.
#typedef requires all documentations to be specified in its own comment block. So I have to be redundant between specific documentation on the methods and the typedef
loses the docummentation once you write out the entire method up until the open paren. Sort of workable...
Note: I am willing to just assign all the methods manually one by one instead of doing a foreach on all the keys of the methods mixin.
Also I do not know how to specify the parameters for a function passed as a. This should be possible since Array.map( specifies three arguments for its function call.
The goal is to get documentation when someone imports this as a library with require, or just includes it as a library in browser side script.
In my TypeScript project (using only internal modules), I want to include polyfills/extension for an existing library. For this example, I will use the RxJS library but the question/problem is not specific to this library.
The following code is what I came up with:
module MyModule.Rx {
Rx.Observable.prototype.myExtension = function() { /* ... */ };
}
The RxJS definitions (.d.ts files) are used and compiled together with the code. This leads to the following compiler error: 2339 Property 'Observable' does not exist on type 'typeof Rx'
As far as I can tell this happens because I used the same Rx identifier in MyModule.Rx. When switching the namespace in the first line to module MyModule.NotRx { everything works fine - the Observable type is correctly looked up from the RxJS .d.ts file.
So it seems that the names MyModule.Rx and the RxJS declared Rx namespaces are in conflict. I know that I could simply rename my namespace to MyModule.SomethingElse but that seems somewhat of a hack.
Having all polyfills/extensions for Rx in the MyModue.Rx namespace seems a natural choice for me - how can this be done in a clean way?
You can't do that.
Take this code in TypeScript:
var B = 'test';
module A.B {
// Declare a function
export function fn() {
}
// Tests
console.log(B); // Object { }
A.B.fn(); // valid
B.fn(); // valid
fn(); // valid
}
The message displayed in the console is: Object { } and not test. Look at the transpiled code:
var B = 'test'; // root scope
var A;
(function (A) {
var B; // same name, hide the root scope one
(function (B) {
// Declare a function
function fn() {
}
B.fn = fn;
// Tests
console.log(B); // Object { }
A.B.fn(); // valid
B.fn(); // valid
fn(); // valid
})(B = A.B || (A.B = {}));
})(A || (A = {}));
The module A.B is transpiled to two JavaScript variables A and B. We can use them in order to access to the exported members of the module: the function fn is accessible from A.B.fn, B.fn and fn. In the module, the variable B from the root scope is hidden by the variable B of the module.
You can't access to a global variable Rx from a module named Rx.
As mentioned by Tarh you cannot refer to an outer module if its been shadowed by a local variable. I've +1ed his answer and that should be the accepted answer. I'll just leave a few workarounds:
One workaround which you already know is to rename MyModule.Rx to something that doesn't have Rx. An alternative is to capture Rx with some other name:
import OrigRx = Rx;
module MyModule.Rx {
OrigRx.Observable.prototype.myExtension = function() { /* ... */ };
}
This is very similar to https://stackoverflow.com/a/29021964/390330