Mobile app version of vmapp.org
Login or Join
Eichhorn148

: JavaScript conditional "builds" I'm working on a piece of JavaScript code that searches its host page for references from a certain source and when hovered, shows the definition/referenced text

@Eichhorn148

Posted in: #Automation #CrossBrowser #Javascript #Tools

I'm working on a piece of JavaScript code that searches its host page for references from a certain source and when hovered, shows the definition/referenced text in a tooltip (something like Google Dicitionary or RefTagger)

My problem is not with the functionality itself, but handling the browser-specific nuances in the implementation. I want to create at least three "editions", with small but important differences:


a "standalone" version to be embedded in websites as a <script src="..."/> tag
a Chrome plugin
a Firefox plugin.


How could I handle this situation, is there some kind of JS preprocessor which understands conditional sections? Something like C-like #ifdef comments would come handy to strip out the irrelevant parts.

(A specific problem, as an example:

The main code is almost the same for all of them, the plugins need some extra functions for handling their settings but these are in separate files. But injecting the content has to be done in at least two different ways:


innerHTML would work in any modern browser, but the Firefox add-on guidelines forbid its usage (I understand the reasons and accept this policy)
DOM manipulation methods could be used instead, but since the content to inject can contain HTML elements, I have to parse and re-create it (with filtering based on a whitelist). This can be done by DOMParser, but if I want to use text/html as content type, a lot of compatibility code has to be added to support IE <10.


So basically I could use innerHTML anywhere except the Firefox plugin, or the DOM method with a lot of extra stuff I don't want to add to the standalone version (to minimize page load delay). It would be great to implement all these editions in one single file with something like conditional sections for different versions.)

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Eichhorn148

1 Comments

Sorted by latest first Latest Oldest Best

 

@Megan663

Okay, I figured it out using PowerShell (feel free to add bash-powered info):

The script to strip out unneeded code regions (and all conditional markup):

[Regex]::Replace(
[Regex]::Replace(
(Get-Content $source -Raw),
'(?sm)// #if ((!' + $condition + ')|(?!' + $condition + ')[A-Z]+).*?// #endif 1',
''
),
'// #(end)?if !?[A-Z]+',
'') |
Set-Content $output


The input file (set in $source) can contain sections similar to this:

if(cache[reference]){
// #if FIREFOX
addContent(cache[reference]);
// #endif FIREFOX
// #if !FIREFOX
tooltip.innerHTML = cache[reference];
// #endif !FIREFOX
return;
}


To get the Firefox-specific version, use the script like this (after adding params declaration and saving to script.ps1):

powershell -File script.ps1 input.js output.js FIREFOX

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme