I have the regular expression:
/(?:!!)(.+)(?:!!)(?:\(zoomOn )([\S,]+)(?:\))/g
It matches something like !!some text!!(zoomOn 1,2,3).
This works okay in the browser (JSFiddle here) but not in Node. I am writing in ES2015, using Babel and the es2015 preset.
For extra insight this is for a Showdown extension. I noticed the twitter extension add some extra \ to the RegExps. Is this a quirk of Node/ES5 I'm not aware of?
Update
I was hoping I wouldn't need to post the code for Node since I thought it would just be a node quirk.
Anyway, the code is for an extension to Showdown:
# extensions.js
export const manipulationAPIExtensions = () => [
{
// [zoomOn node1,node2,node3,...](some text)
type: 'lang',
filter: (text, converter, options) => {
const toReturn = text.replace(/(?:!!)(.+)(?:!!)(?:\(zoomOn )([\S,]+)(?:\))/g, (match, innerText, nodeString) => {
const nodes = nodeString.split(/\s*,\s*/);
let nodeArrayAsString = '[';
nodes.forEach(node => {
nodeArrayAsString += `'${node}',`;
});
nodeArrayAsString += ']';
return `<a onclick="pathwayInstance.manipulator.zoomOn(${nodeArrayAsString})">${text}</a>`;
});
return toReturn;
},
},
];
This is used in Showdown as follows:
export const getShowdown = (KaavioInstance) => {
window.diagram = KaavioInstance;
Showdown.extension('kaavio', manipulationAPIExtensions());
return new Showdown.Converter({
extensions: ['kaavio'],
});
};
And then in my unit test:
describe('CustomMarkdown', () => {
// Don't really need Kaavio since we are only checking the output HTML
const mockKaavioInstance = {};
const converter = getShowdown(mockKaavioInstance);
console.log(converter.getAllExtensions())
describe('Kaavio', () => {
it('should return the correct HTML from the markdown', () => {
const markdown = normalize(fs.readFileSync(`${__dirname}/extensions/Kaavio.md`, 'utf8'));
const HTML = normalize(fs.readFileSync(`${__dirname}/extensions/Kaavio.html`, 'utf8'));
const output = converter.makeHtml(markdown);
assert.equal(output, HTML);
});
});
});
The unit test fails since no match is found.
If I do something simple like the below it works. Of course the unit test doesn't work but if I console.log it out then I get the expected result of matched.
# extensions.js
export const manipulationAPIExtensions = () => [
{
// [zoomOn node1,node2,node3,...](some text)
type: 'lang',
filter: (text, converter, options) => {
const toReturn = text.replace(/./g, (match) => {
return 'matched';
});
return toReturn;
},
},
];
That works for me in Node, just tried it, but that fiddle uses an alert(). You need to use something like console.log() that Node understands.
var text = '!!some text!!(zoomOn node1)';
text.replace(/(?:!!)(.+)(?:!!)(?:\(zoomOn )([\S,]+)(?:\))/g, function (match, innerText, nodeString) {
console.log("matched!");
})
Maybe you have some other code you didn't post which is interfering?
This is embarrassing but a lesson in checking all called functions learned. The normalize() function that is called in these lines:
const markdown = normalize(fs.readFileSync(`${__dirname}/extensions/Kaavio.md`, 'utf8'));
const HTML = normalize(fs.readFileSync(`${__dirname}/extensions/Kaavio.html`, 'utf8'));
was replacing white spaces with bullet characters... Thanks for the help regardless!
Related
In my extension I want to edit the document on a few specific document edits.
My actual use case is a bit complicated so I have created a minimal example. The code below listens for any document edit. If the word "hello" exists in the edit (i.e. the user pasted some code that contains the word "hello") then we replace the change range with the pasted text but just make it upper case.
We also console.log if the edit was successful, and any potential reason the edit was rejected.
vscode.workspace.onDidChangeTextDocument(event => {
for (const change of event.contentChanges) {
if (change.text.includes("hello")) {
activeEditor.edit(editBuilder => {
editBuilder.replace(change.range, change.text.toUpperCase());
}).then(
value => console.log("SUCCESS: "+value),
reason => console.log("FAIL REASON: "+reason),
);
}
}
});
A working example would be selecting some text in a document and pasting in the text const hello = 5;. As expected, the extension replaces the text with CONST HELLO = 5; and logs SUCCESS: true.
But when I paste in some text that automatically get formatted I run into problems. If I were to paste in:
const hello = 5;
const lol = 10;
const lmao = 20;
Including all the whitespaces/tabs, then vscode wants to "format" or correct my lines, i.e. remove the whitespace. So the resulting text will be:
const hello = 5;
const lol = 10;
const lmao = 20;
The extension tries to make it uppercase still but only prints SUCCESS: false. No reason is logged at all; the reject function is not executed.
Why does the edit not succeed? Should I await the other edits somehow or keep re-trying the edit until it succeeds? Am I logging the rejection incorrectly?
In case it helps, here is code I use - I found it better to have the editBuilder outside the loop. I think you can adapt it for your purposes:
editor.edit( (editBuilder) => {
// put your for (const change of event.contentChanges) {} here
for (const match of matches) {
resolvedReplace = variables.buildReplace(args, "replace", match, editor.selection, null, index);
const matchStartPos = document.positionAt(match.index);
const matchEndPos = document.positionAt(match.index + match[0].length);
const matchRange = new vscode.Range(matchStartPos, matchEndPos);
editBuilder.replace(matchRange, resolvedReplace);
}
}).then(success => {
if (!success) {
return;
}
if (success) { ... do something here if you need to }
});
One solution is just to "keep trying again". I do not like this solution, but it is a solution nevertheless, and it currently works for my use-case.
async function makeReplaceEdit(range: vscode.Range, text: string, maxRetries = 10) {
for (let i = 0; i <= maxRetries; i++) {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const success = await editor.edit(editBuilder => {
editBuilder.replace(
range,
text
);
}, { undoStopBefore: false, undoStopAfter: false });
if (success) break;
}
};
vscode.workspace.onDidChangeTextDocument((event) => {
// See if any change contained "hello"
let foundHello = false;
for (const change of event.contentChanges) {
if (change.text.includes("hello")) {
foundHello = true;
}
}
if (foundHello) {
console.log("inside1");
const editor = vscode.window.activeTextEditor;
if (!editor) return;
makeReplaceEdit(editor.document.lineAt(0).range, "Change");
}
});
I'm trying to replicate the code in this article:
https://depth-first.com/articles/2020/08/24/smiles-validation-in-the-browser/
What I'm trying to do different is that I'm using a textarea instead of input to take multi-line input. In addition to displaying an error message, I also want to display the entry which doesn't pass the validation.
The original validation script is this:
const path = '/target/wasm32-unknown-unknown/release/smival.wasm';
const read_smiles = instance => {
return smiles => {
const encoder = new TextEncoder();
const encoded = encoder.encode(`${smiles}\0`);
const length = encoded.length;
const pString = instance.exports.alloc(length);
const view = new Uint8Array(
instance.exports.memory.buffer, pString, length
);
view.set(encoded);
return instance.exports.read_smiles(pString);
};
};
const watch = instance => {
const read = read_smiles(instance);
document.querySelector('input').addEventListener('input', e => {
const { target } = e;
if (read(target.value) === 0) {
target.classList.remove('invalid');
} else {
target.classList.add('invalid');
}
});
}
(async () => {
const response = await fetch(path);
const bytes = await response.arrayBuffer();
const wasm = await WebAssembly.instantiate(bytes, { });
watch(wasm.instance);
})();
For working with a textarea, I've changed the watch function to this and added a <p id="indicator"> element to the html to display an error:
const watch = instance => {
const read = read_smiles(instance);
document.querySelector("textarea").addEventListener('input', e => {
const { target } = e;
var lines_array = target.value.split('/n');
var p = document.getElementById("indicator");
p.style.display = "block";
p.innerHTML = "The size of the input is : " + lines_array.length;
if (read(target.value) === 0) {
target.classList.remove('invalid');
} else {
target.classList.add('invalid');
}
});
}
I'm not even able to get a count of entries that fail the validation. I believe this is async js and I'm just a beginner in JavaScript so it's hard to follow what is happening here, especially the part where the function e is referencing itself.
document.querySelector("textarea").addEventListener('input', e => {
const { target } = e;
Can someone please help me in understanding this complicated code and figuring out how to get a count of entries that fail the validation and also printing the string/index of the same for helping the user?
There is a mistake in you code to count entries in the textarea:
var lines_array = target.value.split('\n'); // replace /n with \n
You are asking about the function e is referencing itself:
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. You can find more informations Mdn web docs - Destructuring object
I have a problem with this piece of code.
I import input data from a file formated like so and store it in const input:
aabcccccaaa
aaccb
shsudbud
There are no spaces or any other white characters except from '\n' newline.
I get inputs in this way: (LiveServer inside VS Code)
const getData = async () => {
const resp = await fetch("./inputs.txt");
const data = await resp.text();
return data;
};
Then I call:
const myFunc = async () => {
const input = await getData();
const rows = input.split("\n").map(row => row);
rows.forEach(row => {
const charArr = [...row];
console.log(charArr);
});
};
After logging to console first and second row it seems like there is "" (empty string) attached to the end of each of them. The third element is fine so I guess its somehow connected with newline character.
I have also tried creating charArr by doing:
const charArr = Array.from(row);
Or
const charArr = row.split("");
But the outcome was the same.
Later I found this topic: Remove empty elements from an array in Javascript
So I tried:
const charArr = [...row].filter(Boolean);
But the "" is still at the end of charArr created from 1st and 2nd row.
const input = `aabcccccaaa
aaccb
shsudbud`;
const rows = input.split("\n").map(row => row);
rows.forEach(row => {
const charArr = [...row];
console.log(charArr);
});
In this snippet everything works fine. So here is where my questions start:
Why does .filter() method not work properly in this case?
Could this problem browser specific?
Thanks in advance.
Looking for some help on porting this objective-c class method to JS/nativescript.. every variation I've tried has resulted in a TypeError: undefined is not a function...
https://developer.apple.com/documentation/avfoundation/avvideocomposition/1389556-init
Which I've tried to write in JS as:
const videoComp = AVVideoComposition.alloc().initWithAssetApplyingCIFiltersWithHandler(asset, (request) => { ... });
//OR
const videoComp = AVVideoComposition.alloc().initAssetApplyingCIFiltersWithHandler(asset, (request) => { ... });
//OR
const videoComp = AVVideoComposition.alloc().initAssetApplyingCIFiltersWithHandlerApplier(asset, (request) => { ... });
//OR
const videoComp = new AVVideoComposition(asset, (request) => { ... });
to name a few. essentially, I am trying to port this code to nativescript/JS:
let blurRadius = 6.0
let asset = AVAsset(url: streamURL)
let item = AVPlayerItem(asset: asset)
item.videoComposition= AVVideoComposition(asset: asset) { request in
let blurred = request.sourceImage.clampedToExtent().applyingGaussianBlur(sigma: blurRadius)
let output = blurred.clampedToRect(request.sourceImage.extent)
request.finish(with: output, context: nil)
}
found in this blog post: https://willowtreeapps.com/ideas/how-to-apply-a-filter-to-a-video-stream-in-ios
It should look something like this with JavaScript / Typescript,
let blurRadius = 6.0;
let asset = AVAsset.assetWithURL(streamURL);
let item = AVPlayerItem.alloc().initWithAsset(asset);
item.videoComposition = AVVideoComposition.videoCompositionWithAssetApplyingCIFiltersWithHandler(asset, request => {
let blurred = request.sourceImage.imageByClampingToExtent().imageByApplyingGaussianBlurWithSigma(blurRadius);
let output = blurred.imageByClampingToRect(request.sourceImage.extent);
request.finishWithImageContext(output, null);
});
Note: The code is untested and merely a translation of given native code. Make use of tns-platform-declarations for IntelliSense support.
Looking at the the "Streams 2 & 3 (pull) example" from: https://github.com/jprichardson/node-fs-extra#walk
var items = [] // files, directories, symlinks, etc
var fs = require('fs-extra')
fs.walk(TEST_DIR)
.on('readable', function () {
var item
while ((item = this.read())) {
items.push(item.path)
}
})
.on('end', function () {
console.dir(items) // => [ ... array of files]
})
Latest version of JSLint complaints about the while:
Unexpected statement '=' in expression position.
while ((item = this.read())) {
Unexpected 'this'.
while ((item = this.read())) {
I'm trying to figure out how to write this in a JSLint-approved way. Any suggestions?
(Note: I'm aware there are other JSLint violations in this code ... I know how to fix those ...)
If you're really interested in writing this code like Douglas Crockford (the author of JSLint), you would use recursion instead of a while loop, since there are tail call optimizations in ES6.
var items = [];
var fs = require("fs-extra");
var files = fs.walk(TEST_DIR);
files.on("readable", function readPaths() {
var item = files.read();
if (item) {
items.push(item.path);
readPaths();
}
}).on("end", function () {
console.dir(items);
});