I am writing custom eslint rules. The rules are flagging the correct spot in the code, but Visual Studio Code is not offering my quick fixes.
Here's the start of the code:
module.exports = {
meta: {
type: "suggestion",
docs: {
description: "Use design tokens",
category: "Design System",
recommended: false
},
fixable: "code"
},
And Here is, where I report the problem:
for (const m of matchedTokens) {
suggest.push({
desc: property.value.raw + " should be " + m,
fix(fixer) {
return fixer.replaceText(property.value, m);
}
})
}
context.report({
node: property,
message: 'Possible value for replacement of {{ key }} with design token',
data: {
key: property.key.name
},
suggest
})
How can I make suggestions work in the IDE? Is my expectation correct that these should show as quick fix in Visual Studio code? Is there anything else I need to do to opt into fixes?
Related
I'm getting an instance.requestpaymentmethod is not a function when I was just following along the tutorial for custom-field integration found here:
https://developers.braintreepayments.com/start/tutorial-hosted-fields-node
The error happens when I click on the "Pay" button.
Did anyone solve this problem? My assumption is that the code isn't updated or the script sources changed somewhat. If anyone from Braintree can actually help, that'll be great.
Thanks!
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
I took a look at the example code snippet in the guide you shared and I was able to find the culprit. First off, the error you're getting is expected as the requestPaymentMethod method actually belongs to our Drop-In UI solution and the Hosted Fields JS library doesn't have such module. I informed our Documentation team to get that code example updated.
That being said, you can find a working example in our Hosted Fields guide. If you check the function (hostedFieldsErr, hostedFieldsInstance) callback function, you'll see that the payment nonce is created by the tokenize function of the hostedFieldsInstance.
I also ran into this issue today. Use the following code in <script> tag. It will work for you.
var form = document.querySelector('#hosted-fields-form');
var submit = document.querySelector('input[type="submit"]');
braintree.client.create({
authorization: '<YOUR_TOKENIZATION_KEY>'
}, function (clientErr, clientInstance) {
if (clientErr) {
console.error(clientErr);
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2019'
}
}
}, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) {
console.error(hostedFieldsErr);
return;
}
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
if (tokenizeErr) {
console.error(tokenizeErr);
return;
}
console.log('Got a nonce: ' + payload.nonce);
$.ajax({
type: 'POST',
url: '<YOUR_API_URL>',
data: { 'paymentMethodNonce': payload.nonce }
}).done(function (result) {
hostedFieldsInstance.teardown(function (teardownErr) {
if (teardownErr) {
console.error('Could not tear down Drop-in UI!');
} else {
console.info('Drop-in UI has been torn down!');
$('#submit-button').remove();
}
});
if (result.success) {
$('#checkout-message').html('<h1>Success</h1><p>Your Drop-in UI is working! Check your sandbox Control Panel for your test transactions.</p><p>Refresh to try another transaction.</p>');
} else {
console.log(result);
$('#checkout-message').html('<h1>Error</h1><p>Check your console.</p>');
}
});
});
}, false);
});
});
I have feature whereby am constructing a url like :
http://localhost/listings?q=&idx=content_index&p=0&dFR[objectID][0]=97&dFR[objectID][1]=96
It creates a facetFilters: [["objectID:97","objectID:96"]]"}. I have a clear All feature also which clear all the filters:
search.addWidget(
instantsearch.widgets.clearAll({
container: '#clearAll',
templates: {
link: '<i class="icon icon-undo2"></i>'
},
autoHideContainer: false,
clearsQuery: true
})
);
This works perfectly fine and clears the above filter also. But the issue came when started routing. With routing,
http://localhost/listings?q=&idx=content_index&p=0&dFR%5Bgenres.name%5D%5B0%5D=Comedy
changed to :
http://localhost/listings?genres=Comedy
Have done the below changes for the above:
routing: {
stateMapping: {
stateToRoute(uiState) {
return {
query: uiState.query,
// we use the character ~ as it is one that is rarely present in data and renders well in urls
genres:
uiState.refinementList &&
uiState.refinementList['genres.name'] &&
uiState.refinementList['genres.name'].join('~'),
page: uiState.page
};
},
routeToState(routeState) {
return {
query: routeState.query,
refinementList: {
'genres.name': routeState.genres && routeState.genres.split('~'),
},
page: routeState.page
};
}
}
},
Have to implement the same functionality for objectID. How to do that?
I'm having some trouble getting codemirror to apply the correct autoindentation to inner modes in a mixed mode.
You can see a live version of the mode (and how it's not working) here:
https://extremely-alpha.iodide.io/notebooks/216/ but in short the idea is to be able to use matlab style block delimiters to switch between languages like this:
%% js
[1,2,3].forEach(i => {
console.log(i)
})
%% py
for i in range(5):
for j in range(10):
print i+j
%% css
div#foo {
border: 1px solid pink
}
As you can see from my example link, the syntax highlighting works ok, but you'll also notice that the indentation is not working as desired.
The code for this codemirror mode is here on github. It is very much based on codemirror's html mixed mode.
I tried adding copyState to my code, again following the html mixed mode --
copyState: state => {
let local;
if (state.localState) {
console.log("state.localState copied");
local = CodeMirror.copyState(state.localMode, state.localState);
}
return {
token: state.token,
localMode: state.localMode,
localState: local
};
},
-- but this results in a different kind of weird indentation behavior, and doesn't end up working.
I've been banging my head against this for quite some time, and I haven't been able to piece it together via google, api docs and forums, so any help would be greatly appreciated! Thank you!
in case anyone comes across this problem in the future: it turns out codemirror modes do not typically come with sensible defaults built in, or at least they are not loaded by default when you use CodeMirror.getMode(...). In my case, I had to change from
const innerModes = {
js: CodeMirror.getMode({}, { name: "javascript" }),
py: CodeMirror.getMode({}, { name: "python" }),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({}, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
to:
const innerModes = {
js: CodeMirror.getMode(
{ indentUnit: 2, statementIndent: 2 },
{ name: "javascript" }
),
py: CodeMirror.getMode(
{ indentUnit: 4, hangingIndent: 4 },
{ name: "python" }
),
md: CodeMirror.getMode({}, { name: "markdown" }),
css: CodeMirror.getMode({ indentUnit: 2 }, { name: "css" }),
raw: CodeMirror.getMode({}, { name: "text/plain" }),
fetch: CodeMirror.getMode({}, { name: "fetch" })
};
This prevented NaNs from getting passed out of the indent function of the sub-modes.
With ydn-dn, i want to automatically synchronise data from my web app with my REST back end.
I read the documentation and searched in examples but i cannot make it work.
https://yathit.github.io/ydn-db/synchronization.html
http://dev.yathit.com/api/ydn/db/schema.html#sync
I tried to define a schema with sync configuration like that :
var schema = {
stores: [ {
name: 'contact',
keyPath: 'id',
Sync: {
format: 'rest',
transport: service,
Options: {
baseUri: '/'
}
}
}
]
};
and created a function for transport :
var service = function(args) {
console.log("contact synch");
};
but my service function is never called.
I certainly misunderstood how YDN-db work, but i didn't found any example.
To complete, here is a jsfiddle :
http://jsfiddle.net/asicfr/y7sL7b3j/
Please see the example http://yathit.github.io/ydndb-demo/entity-sync/app.html
Older example http://yathit.github.io/sprintly-service/playground.html from https://github.com/yathit/sprintly-service
I am trying to implement bit rate selection like in flowplayer like in youtube. One option should be 'auto' and others manual. I am using a smil file to load my videos. Flowplayer documentation http://flash.flowplayer.org/plugins/flash/menu.html shows using the menu plugin. I cannot do it using that method since the url path is generated at run time. So I have use smil for menu creation and it works.I just mention the smil file name and the menu plugin loads the bit rates from the smil seamlessly. I am not exactly sure how this works though.
This is the code
clip: {
url:"<?php echo getxml(); ?>",
autoPlay: true,
provider: 'rtmp',
scaling:"fit",
urlResolvers: [ 'smil', 'bwcheck','brselect' ],
onStart: function() {
}
},
plugins: {
smil: {
url: "flowplayer.smil/flowplayer.smil-3.2.8.swf"
},
bwcheck: {
url: "flowplayer.bwcheck/flowplayer.bwcheck-3.2.11.swf",
serverType: 'wowza',
dynamic: true,
dynamicBuffer:true,
netConnectionUrl: 'rtmp://itl.bc-s.cdn.bitgravity.com/cdn',
checkOnStart: true,
rememberBitrate: true,
onStreamSwitchBegin: function(newItem, currentItem) {
$f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName +" from " + currentItem.streamName);
},
onStreamSwitch: function(newItem) {
$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
},
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
{ label: " Auto", enabled: true, index: 0,toggle:true , selected:true},
],
onSelect: function(item) {
if(item.index == 0){
$f().getPlugin('bwcheck').enableDynamic(true);
$f().getPlugin('content').setHtml("Auto Mode Slected : Best bit rate will be selected according to your bandwidth");
}
else{
$f().getPlugin('bwcheck').enableDynamic(false);
$f().getPlugin('content').setHtml("Manual bit rate selection activated");
}
}
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
menu: true,
},
As you can see from the code I placesd a single item like this
{ label: " Auto", enabled: true, index: 0,toggle:true , selected:true},
By default auto mode is selected and I have to give a tick mark to the menu item 'Auto'. This was also achieved using the parameter 'selected'. But the problem is that the bit rate being played when the file starts playing in the auto mode is also selected and that too gets a tick mark like this.
http://tinypic.com/r/2nkt9fl/6
I need to disable that. The switching is happening and functionality is implemented but the user gets the wrong idea. There is a property by the name 'group' and I guess I will have to make all the items as a part of the group. A combination of the 'group' , 'selected' and 'toggle' property should be able do this but I cannot implement it.