How to emit new asset without minimized in webpack5 custom plugin? - plugins

Let's say i have following custom plugin:
const webpack = require('webpack');
const path = require('path');
const pluginName = 'TestWebpackPlugin';
class TestWebpackPlugin {
constructor(opts) {
this.options = opts || {};
}
apply(compiler) {
const options = this.options
compiler.hooks.compilation.tap('TestWebpackPlugin', (compilation) => {
compilation.hooks.needAdditionalPass.tap('TestWebpackPlugin', () => false)
compilation.hooks.processAssets.tap(
{
name: 'TestWebpackPlugin',
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_DERIVED
},
(assets) => {
// this new asset will also be minimized if mode = production
// the question is: how to make this new asset ignored by minimizer?
compilation.emitAsset(
'newfile',
new webpack.sources.RawSource('console.log("test content")')
);
}
);
});
}
}
module.exports = TestWebpackPlugin
the question is: how to make this new asset ignored by minimizer?

I found the question while searching for more information on the emitAsset method (how to write in UTF-8).
I am rewriting a Webpack 4 plugin (in an Angular context) with this new syntax, following the example given at https://webpack.js.org/contribute/writing-a-plugin/, and when I write the file at the given Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE stage, I find out that:
I can give a relative path, like: ./i18n/${fileName}.json
The written files are not minimized

Related

Use Hogan template inside instantsearch widget connector

I have used Hogan templates in widgets, and now I want to use it inside a widget connector. Does anyone know how to do that?
All docs on instantsearch only uses javascript template literals.
Example:
const fmInfiniteHits = instantsearch.connectors.connectInfiniteHits(
(renderArgs, isFirstRender) => {
const { hits, showMore, widgetParams } = renderArgs;
const { container } = widgetParams;
if (isFirstRender) {
$(container).append('<ul></ul>');
return;
}
// NOW
$(container +' ul').html(hits.map(hit => `<li> ... </li>`));
// WHAT I WANT
let result = hits.renderWithHogan; // <-- How do I do this
$(container +' ul').html(result);
},
);

How I get contain of a href and img from cgv website using axios and jsdom

I have a problem when i wanto target and get contain a href and img from this website https://www.cgv.id/en/movies/now_playing but i always wrong to get it. This is may code:
const { default: axios } = require("axios");
const { JSDOM } = require("jsdom");
(async () => {
try {
const { data } = await axios.get(
"https://www.cgv.id/en/movies/now_playing"
);
let dom = new JSDOM(data).window.document;
let list = [...dom.getElementsByClassName('movie-list-body').querySelectorAll('li')]
list = list.map(v => v.document.querySelectorAll('li a[href]').textContent.trimEnd())
console.log(list);
} catch (error) {
console.log(error);
}
})()
My code is error. How i repair it and can target to get contain a href and img it?
There are couple of issues with using JSDOM there, especially the way you are using it.
Firstly the website in question does not have any markup for the DOM element with the class name movie-list-body as you retrieve it using Axios
On further inspection I realised they are using a jQuery AJAX call to retrieve all the links and images from a JSON file.
Following is the script they are using to do so.
<script>
$(function() {
$.ajax({
type: 'GET',
url: '/en/loader/home_movie_list',
success: function(data) {
$('.movie-list-body').html(data.now_playing);
$('.comingsoon-movie-list-body').html(data.comingsoon);
$('.lazy').lazy({
combined: true
});
}
});
});
</script>
In my opinion you should just use that JSON file. However, if you still want to use JSDOM following are some of the approaches.
Given that the site requires resource processing, if you want to parse the whole page using JSDOM you will have to pass the options as mentioned in the JSDOM documentation as follows:
const options = {
contentType: "text/html",
includeNodeLocations: true,
resources: "usable",
};
let dom = new JSDOM( data, options ).window.document;
These options will allow the JSDOM to load all the resources including jQuery that will in-turn allow the Node to make the AJAX call, populate the element and then in-theory you extract the links. However, there are some CSS files that JSDOM is unable to parse.
Therefore, I think your best bet is to do something along the following lines:
const { default: axios } = require("axios");
const { JSDOM } = require("jsdom");
(async () => {
try {
const data = await axios.get(
"https://www.cgv.id/en/loader/home_movie_list"
);
const base_url = 'https://www.cgv.id';
var dom = new JSDOM(data.data.now_playing).window.document;
var lists = [ ... dom.getElementsByTagName('ul')[0].children ]
var list = lists.map( list => [ base_url+list.firstChild.href, list.firstChild.firstChild.dataset.src ] );
console.log( list );
} catch (error) {
console.log(error);
}
})()
Note:
There is only one catch with the approach mentioned above which is that if the author of the website changes the endpoint for the JSON file, your solution will stop working.

Open another document in VSCode extension from Hover

I try to open a document from a Hover in a VSCode Extension.
The Hover appears, the link is shown and also the URI, but when I click, nothing happens. There is an output in the Debug Console, that the command is unknown in the Developer Tools Console.
What I am doing wrong? Here is the code, a little bit simplified
context.subscriptions.push(
vscode.languages.registerHoverProvider({pattern: '**/*.{ttp,tts}'}, {
provideHover(document, position, token) {
const linkPosition = new vscode.Position(10, 1);
const range = new vscode.Range(position, position);
const opts: vscode.TextDocumentShowOptions = {
selection: range,
viewColumn: vscode.ViewColumn.Beside
};
const workspace = vscode.workspace.workspaceFolders?.find(e => e.uri.fsPath.endsWith("workspace"));
const uri = vscode.Uri.file(`${workspace?.uri.path}/_global.tt/ercdata/ttc.properties`);
const args = [{ uri: uri , options: opts}];
const stageCommandUri = vscode.Uri.parse(
`command:window.showTextDocument?${encodeURIComponent(JSON.stringify(args))}`
);
let link = new vscode.MarkdownString(`[Open...](${stageCommandUri})`);
link.isTrusted = true;
let hover: vscode.Hover = {
contents: [link]
};
return hover;
let x = properties.getHoverFor(document, position, path.basename(document.uri.fsPath).replace(".tts","").replace(".ttp","").toLowerCase());
return x;
}
}));
Here is how the Hover renders:
Here is the output of the dev console:
You should use a true command like vscode.open as documented in this article, or your own command.
window.showTextDocument alone is an extension API.
Lex Li pointed me into the right direction, thank you.
Wrapping the openTextDocument task into my own command and adressing this command from the Hover solves the problem:
context.subscriptions.push(vscode.commands.registerCommand('estudio.internal.open', (uri: vscode.Uri, options: vscode.TextDocumentShowOptions) => {
logger.info("Opening a document");
vscode.window.showTextDocument(uri, options);
}));
Than composing the Hover use
const stageCommandUri = vscode.Uri.parse(
`command:estudio.internal.open?${encodeURIComponent(JSON.stringify(args))}`
did it.

How to add properties to leaflet-geoman layer when using the toolbar

I need to add custom props to my created polys. To do so currently when the user select in the toolbar the polygon and create a shape, on the create event I convert it to json remove it from the map add the custom props to the json and reload the newly created layer.
this.map.on('pm:create', e => {
const id = getUID();
const leafId = e.layer._leaflet_id;
const featureGroup = L.featureGroup().addLayer(e.layer);
this.map.eachLayer(layer => {
if (layer._leaflet_id === leafId) {
this.map.removeLayer(layer);
}
});
const data = featureGroup.toGeoJSON();
data.features[0].properties = {
id,
name: `Zone ${id}`
};
this.zoneService.add({id, data: JSON.stringify(data)})
.pipe(
switchMap((res) => this.zoneService.getAll().pipe(this.addToMap(this.map)))
).subscribe();
});
This is working but I feel I am not doing something right here. Adding removing Adding, there must be a better way. Thanks for any help

How could I load video files from my library? Ionic 3

I observed that the Native File has not been supported by the Ionic View anymore see list here.
I am trying to get a video from my library by using Native Camera to access the videos. It can return me 3 different formats of path to my videos (DATA_URL, FILE_URI, and NATIVE_URI).reference to Native Camera here
I am currently using FILE_URI as recommended in this post. It returns something like "/storage/emulated/0/DCIM/Camera/VID_20180312_210545.mp4"
Please have a look at my code below. Aiming a better understanding, the current behavior is highlighted by comments with "//** comment ***" :
addVideoToOffer(){
this.platform.ready().then(() =>{
const options: CameraOptions = {
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
mediaType: this.camera.MediaType.VIDEO,
}
this.camera.getPicture(options).then((data_uri) => {
this.readVideoFileasGeneral(data_uri);
});
});
}
readVideoFileasGeneral(data_uri) {
if(!data_uri.includes('file://')) {
data_uri = 'file://' + data_uri;
}
return this.file.resolveLocalFilesystemUrl(data_uri)
.then((entry: FileEntry) => {
//***it does not get in here***
this.presentQuickToastMessage(data_uri);
return new Promise((resolve)=>{//, reject) => {
entry.file((file) => {
let fileReader = new FileReader();
fileReader.onloadend = () => {
let blob = new Blob([fileReader.result], {type: file.type});
resolve({blob: blob, file: file});
};
fileReader.readAsArrayBuffer(file);
});
})
})
.catch((error) => {
this.presentQuickToastMessage(error);
//***it presents "plugin_not_installed" here***
});
}
I understand that I am having this message because Native File is not supported anymore (maybe reason of the plugin_not_installed message). However, I still have to do this task. So, if someone has any idea of what I could be using in order to have the selected videos in a blob, it would be great!
Thanks for reading until here,
Cheers,
Roger A L
makeFileIntoBlob(uri) {
// get the correct path for resolve device file system
let pathIndex = uri.indexOf('var');
let correctPath = uri.slice(+pathIndex);
this.file
.resolveLocalFilesystemUrl((this.platform.is('ios') ? 'file:///' : '') + correctPath)
.then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
.catch(err => console.log('ERROR: ', err));
}
readFile(file) {
if(file) {
const reader = new FileReader();
reader.onloadend = () => {
const blob: any = new Blob([reader.result], { type: file.type });
blob.name = file.name;
console.log(blob);
return blob;
};
reader.readAsArrayBuffer(file);
}
}
You need to get rid of the /private/ and keep file:///, so that your path goes like file:///var/
I'm currently working on something similar.. I have the video recorded with media-capture and then I can display it within a normal video html tag.. if this is all you need then this code may help you...
this.mediaCapture.captureVideo({duration: 10, quality: 0}).then(
(data: MediaFile[]) => {
if (data.length > 0) {
let originname = data[0].fullPath.substr(data[0].fullPath.lastIndexOf('/') + 1);
let originpath = data[0].fullPath.substr(0, data[0].fullPath.lastIndexOf('/') + 1);
let alerta = this.alerts.create({
buttons: ['ok'],
message: this.file.externalDataDirectory
});
alerta.then(set => set.present());
this.file.copyFile(originpath, originname, this.file.externalDataDirectory, 'video.mp4')
.then(result =>{
let videopath = this.webview.convertFileSrc(result.nativeURL)
let video = (document.getElementById('myvideo') as HTMLVideoElement).src = videopath;
.... rest of the code
The problem raise when you try to use the native File plugin... converting files with any method (readAsDataURL, readAsArrayBuffer or readAsBinaryString) will never resolve, this is a known problem with the Ionic Native File plugin but is not taken care of...
What I did is to take the ionic native Filesystem and use it to read the file, this does read the file and get you with a base64 (pretty sure as I don't specify the encoding field) and then you can handle it the way you want...
const data = Filesystem.readFile({
path: result.nativeURL
})
.then(data =>{
...handle data as base64
...rest of the code