We Keep Coding

How do you use an npm package with require & module export as a plain JS library

I'm not sure I'm even asking the right question here, sorry, but I think the two general ones are:
In what way do you need to modify a node.js package using require etc to be used as a plain embedded script/library in HTML?
How do you call a class constructor (?) in JS as a function to validate a form field?
I'm trying to use this small JS library NoSwearingPlease (which is an npm package) in an environment with no node or build system – so I'm just trying to call it like you would jQuery or something with a script & src in the HTML, and then utilise it with a small inline script.
I can see a couple of things are required to get this working:
the JSON file needs to be called in a different way (not using require etc)
the checker variable needs to be rewritten, again without require
I attempted using jQuery getJSON but I just don't understand the class & scope bits of the library enough to use it I think:
var noswearlist = $.getJSON( "./noswearing-swears.json" );
function() {
console.log( "got swear list from inline script" );
})
.fail(function() {
console.log( "failed to get swear list" );
})
noswearlist.done(function() {
console.log( "done callback as child of noswearlist variable" );
var checker = new NoSwearing(noswearlist);
console.log(checker);
});
Please halp. Thanks!

No need to modify, when outside of node the class is just appended to window (global):
fetch("https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/swears.json").then(response => {
return response.json();
}).then(data => {
var noSwearing = new NoSwearing(data);
console.log(noSwearing.check("squarehead"));
});
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>

In the future, you can answer this type of question on your own by looking through the source code and looking up things you don't understand. That being said, here's what I was able to gather doing that myself.
For your first question, if you have no build tools you can't use require, you have to hope your NPM package supports adding the class to the window or has a UMD export (which in this case, it does). If so, you can download the source code or use a CDN like JSDelivr and add a <script> tag to link it.
<script src="https://cdn.jsdelivr.net/gh/ThreeLetters/NoSwearingPlease#master/index.js"></script>
I'm having a hard time deciphering your script (it has a few syntax errors as far as I can tell), so here's what you do if you have a variable ns containing the JSON and the string str that you need to check:
var checker = new NoSwearing(ns);
checker.check(str);
As an aside, you should really use build tools to optimize your bundle size and make using packages a lot easier. And consider dropping jQuery for document.querySelector, fetch/XMLHttpRequest, and other modern JavaScript APIs.

Functions included from the prototype in a javascript class are not seen in the editor's autocomplete

I have the following problem, I have created a library. which its methodos
they are in separate files writeLog.js in a folder called ./lib.
and I have an index.js file that explores that folder and extracts the function
and puts the same name as the file as the function name.
example:
writeLog.js
and then I can use
let jsPackTools require('./index');
let utils = new jsPackTools();
utils.writeLog('test');
The way I use to add the methods to the classes is through the prototype.
the folder is scanned with readdirSync () and then I take the file name to
place it inside a require ().
the code is the following:
fs.readdirSync(__dirname+'/lib').forEach(modules => {
let module = modules.split('.').shift();
jsPackTools.prototype[module] =require(\`${__dirname}/lib/${module}\`);
});
Everything works perfectly fine, the problem is that when I want to access my methods through the autocomplete of any code editor. Methods they seem to be not accessible. however everything works perfectly, I can do use of functions.
    
The problem is that I have to know each method that I am going to use and it cannot be visualized in the completed auto of any editor.
I have tried with:
const writeLog = require('./lib/writeLog');
class jsPackTools {
get writeLog() { return writeLog.bind(this) }
}
This allows indexing perfectly. however, I don't logo do it dynamically.
The idea is that the class does not know what its methods are until the ./lib folder is scanned and all methods are extracted. This way you can add functions inderteminately and when you use them you can see.
    
I do not want to use transpilators, I thought of using a d.ts but it is necessary to use typeScript but the intention is to create this library without dependencies or the least possible.

Unity js script not working

I have recently taken an interest into unity, and as I guide a chose a playlist from youtube. I have installed the
Unity 5.6.4
16 Oct, 2017
version as well.
Now, I encounter an error when I try to add a script to an object.
In the tutorial:
here
, this happens from 11:40 to 13:40.
Basically, as a summary, he is writing a script in js and then attaches it to an object. Now, I have followed the exact steps as him, but it does not work for me.
I write the same script as him, in JS:
then add the script to the object. But then, on the object, I should get a target option, like he does:
However, I don't get this option on my object:
The error I get in the console is this:
Assets/Scripts/PickUp.js(1,386): BCE0044: unexpected char: 0xFEFF.
And this is the actual script:
var target : Transform;
function Update () { }
function OnMouseDown ()
{
this.transform.position = target.position;
this.transform.parent = GameObject.Find("FPSController").transform;
this.transform.parent = GameObject.Find("FirstPersonCharacter").transform;
}
function OnMouseUp ()
{
this.transform.parent = GameObject.Find ("FPSController").transform;
this.transform.parent = null;
}
Now, I've heard that it is not the most efficient, but at this point, I don't really care about that, I just want it to work.

Try to save your script using UTF8 - no BOM (ByteOrderMark). If that does not help, save as Ansi and try that - or read up what unity wants :)
Unity3d Issue Tracker: textassets-encoding-prefab-with-utf8-bom-encryption-is-corrupted it might be related.
This UTF-8 as default in Unity3D new script? was not solved unfortunately.

Access variable from 1 .js source file (jqTree), from within different .js file, to override method

(new to JS, jQuery, & jqTree)
I am trying to override a method (JqTreeWidget.prototype.openNode) from one .js file (tree.jquery.js) in another (my own custom.js).
I've read that to override a js method in general, I just need to redefine it. So I am trying to do that on the method, and I think I am stuck on accessing the variable that has the original method (JqTreeWidget). I think the challenge is that the original method is in tree.jquery.js (source) that is separate from my own other custom.js file where I want to do the override.
The goal of this Question would be to allow me to write something like this in my custom.js (<reference to JqTreeWidget.prototype.openNode> would be the Answer to this Question):
var originalMethod = <reference to JqTreeWidget.prototype.openNode>;
// Override of originalMethod
<reference to JqTreeWidget.prototype.openNode> = function( node, slide ){
// my code I want to happen 1st here
changeAncestorHeightRecursively( node, true);
// my code is done, and now I'm ready to call the original method
originalMethod.call( this, node, slide );
}
I think that would be the most non-intrusive way to do the override, without actually hacking in to the tree.jquery.js source.
See my custom.js at http://codepen.io/cellepo/pen/LGoaQx
The separate source tree.jquery.js is added externally in the JS settings of that codepen.
How can I get access (from within my custom.js file) to JqTreeWidget variable that is in the source file (tree.jquery.js)? Is it even possible? Is JqTreeWidget not in scope outside of tree.jquery.js, or is it not a global variable? I was hoping treeContainer.tree.prototype would have it, but I haven't had luck so far...
Thanks!

The prototype object can be obtained via:
jQuery.fn.tree("get_widget_class").prototype
Note that this is not a generalized solution for any jQuery plugin. This is something explicitly implemented by the tree plugin.

I found this hacky workaround. But since it's a hack, I'd still prefer to find the Answer as posed in this Question (so please, continue to Answer with respect to the <reference to JqTreeWidget.prototype.openNode> I mentioned in the Question, thanks)...
As stated in this Question, the goal involves making it possible to override JqTreeWidget.prototype.openNode (from tree.jquery.js) externally in custom.js. As such, calls to changeAncestorHeightRecursively (my code) & JqTreeWidget.prototype.openNode would both be made from the override in custom.js, and tree.jquery.js source is not modified at all.
Workaround:
Declare global var in html:
<script type='text/javascript' language="javascript">
changeAncestorHeightRecursively = 1;
</script>
In custom.js, set the globar var to the function (the one I want to be called before JqTreeWidget.prototype.openNode):
window.changeAncestorHeightRecursively = changeAncestorHeightRecursively;
Call the global-var-referenced function at the beginning of JqTreeWidget.prototype.openNode (hack into tree.jquery.js):
JqTreeWidget.prototype.openNode = function(node, slide) {
// Only way I could figure out to get this to execute before the rest of this method
// (global-var-referenced function in custom.js)
changeAncestorHeightRecursively( node, true );
// Rest of original openNode code...
}
This calls my code function from within tree.jquery.js, as opposed to calling the overridden method from within custom.js. So this is hacky because of the global var, and modifying tree.jquery.js source.
This will work for now, but hoping for a less hacky Solution as stated in this original Question... Thanks!

Titanium, calling a function in one JS file from another JS file

so i have been trying for many hours a day now for the past 3 days.i researched this to death but still cannot get it.
Goal:
-file1.js has a buttion that when pressed will call method Main_Menu in file2.js and will open a new window created by that method, or function.
failed attempts:
-i have tried Ti.include but always getting a, cant find file error, i have tried changing string to every possible path.
-var file = require(path) but can not use the method inside the file, for example file.Main_Meue, does not work
I have also tried many other things that do not come to mind but if anyone has any advice or you need more information just ask. PLEASE HELP, AND THANKYOU

second answer
Create the second window like so:
//file1.js
button.addEventListener('click', function()
{
var secondWindow = Ti.UI.createWindow({
url:'file2.js'
});
secondWindow.open();
});
file1.js creates a new window using file2.js via the url parameter. file2.js is now your new window after calling secondWindow.open()
First answer
Based off the title of this topic, you can use the fireEvent method. For example:
file1.js
Ti.App.addEventListener('customEventName', function()
{
Ti.API.info('function fired from file2.js');
});
file2.js
Ti.App.fireEvent('customEventName');
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Proxy-method-fireEvent

file1.js
var toBeExported ={
a : function(){
//your code goes here
}
};
exports.a = toBeExported.a
file2.js
var b = require ('file1');
//you can use all the functions that is exported from file1 here.
//you have to create a lib folder or place the file1.js in the existing lib folder for the export/require to work.
Hope this will help.

this might be a problem of code structure. Basically you have three good way to doing this depending on which version you are using (actually on which version you started your project :
before 2.x : the best way was call the tweetanium architecture : www.shanestillwell.com/index.php/2012/03/29/mvc-for-appcelerator-titanium-understanding-tweetanium/
for 2.x : you can use the CommonJS structure : https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium
for 3.x : you should take a look at the Alloy.Globals which is the almost the same than tweetanium
Hope it helps.