Develop Reference

Unexpected syntax error unexpected string when referencing JS from HTML?

Alright, I downloaded this off Github trying to run it locally/modify it. https://tympanus.net/Tutorials/InteractiveRepulsionEffect/interactive-repulsive-effect.zip
The main index.html calls the JS in with: <script type="text/javascript" src="app.0ffbaba978f8a0c5e2d0.js"></script> which seems to be a minified version of app.js which I want to modify.
File structure looks like:
I changed the html to: <script type="text/javascript" src="../src/scripts/app.js"></script> which is the correct filepath to the JS that makes the scene, but I then get
Uncaught SyntaxError: Unexpected string
on line 1 of app.js which is:
import 'styles/index.scss';
import Cone from './elements/cone';
import Box from './elements/box';
import Tourus from './elements/tourus';
I tried changing this path, it doesn't matter. It just doesn't "like" the line. What is going on here? How can I reference the editable JS file?

You can't. The JavaScript code you've got isn't ready to be run in a browser.
Those public/app.xxxxxxxxxx.js files are what's ready to run in a browser, and they're likely compiled by Webpack (or something similar). Your repository has some sort of "build" process in place - chances are you can look at the scripts section of package.json to see the available build commands.

Exactly, you have to place yourself in the first-demo folder and modify your app js. Then run
npm install
to install webpack and any missing packages (just once). Then you can run
npm run build
and it will rebuild your public folder with your changes. Better yet, you can just
npm run start
and you will see a hot reload of your changes when you modify app.js in
http://localhost:9000

How to call js completion in html file instead of js file?

I had installed tern_for_vim and YouCompleteMe for js completion this way.
1 install node
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source ~/.nvm/nvm.sh
nvm install node
2 install tern_for_vim
$ cd ~/.vim/bundle
git clone https://github.com/marijnh/tern_for_vim
3 install YouCompleteMe
cd ~/.vim/bundle/YouCompleteMe
$ ./install.sh --clang-completer --tern-completer
4 edit .tern-project
vim .tern-project
{
"libs": [
"browser",
"underscore",
"jquery"
],
"plugins": {
"node": {}
}
}
Now to vim test.js.
The js completion pop up after inputing document. in test.js file.
Then to vim test.html
No js completion pop up after inputing document. in test.html file.
How to fix it?

Unfortunately this is not officially supported by tern. You can see the response in a closed issue
https://github.com/ternjs/tern_for_vim/issues/170
Because the parsing logic for separating HTML and scripts hasn't been implemented. This could be done as a plugin, if you want to take a shot at it, but it's out of scope for this repository.
But then there is another thread on SO which may help you
Using tern_for_vim plugin in HTML files
So best is to include your code in the html through a JS file and then edit the JS file. Else look at some other plugin/IDE environment. I would explore the below option as well
https://github.com/Shougo/deoplete.nvim#install

I'm unfamiliar with tern_for_vim and YouCompleteMe for js completion, however you could always use vim's built in omni-func completion.
If you add:
filetype on
filetype plugin on
set omnifunc=syntaxcomplete#Complete
to your vimrc file, you can then manually set the filetype of your html file to javascript with :set filetype=javascript whilst in vim.
Following that, when in insert mode, you can then use <C-x> followed by <C-o> to access javascript language specific omni completion.
The resulting completion menu is then navigable by the standard <C-p> for up and <C-n> for down hotkeys.
This, along with other bits of built in completion functionality are discussed in a nice thoughtbot talk.

How to use Node.js packages within a client-side html document using browserify

I'm unable to use a node.js module on my website with broweserify. The example only shows how to run a javascript file that is separate from the .html file, not how to use the node.js module within the .html file. Seems like a trivial problem, but I'm unable to make it work.
Here's what I've done:
Initialized node.js & installed a package, npm i webtorrent-health as an example
Created require_stuff.js which consists of a single line: var WebtorrentHealth = require('webtorrent-health')
Run browserify: browserify require_stuff.js > bundle.js
Include package in my html document, e.g. <script src='bundle.js'></script>
Use the package somewhere in my document, e.g. like this: <script>webtorrentHealth(magnet).then(foobazbar())</script>
Despite bundle.js executing and seemingly defining webtorrentHealth, the script within the .html document fails with WebtorrentHealth is not defined. What am I doing wrong? How do I make it work? Thank you!

You're very close to what you want to achieve. In fact, your code bundle.js is inaccessible from outside (in your case the browser) due to browserify, but you can expose your module by writing at the end of your file require_stuff.js:
window.WebtorrentHealth = WebtorrentHealth;
Now you can use WebtorrentHealth in your document.

Require is not working for node-opcua

I want to load a local version of node-opcua with 'require' inside a HTML file, but it does not really work. The code snippet is the following:
<script type="text/javascript" src="path_to_require.js"></script>
<script>
var opcua = require(["path_to_node-opcua"]); <!-- Yes, the path is correct >
var client = new opcua.OPCUAClient();
...
When I execute the script I get the following error in the console:
Uncaught TypeError: opcua.OPCUAClient is not a constructor
Hence, var opcua is loaded correctly, but OPCUACluent is not, although the class is declared in a file that is present in the node-opcua folder called opcua_client.js under node-opcua\lib\client\
Sources:
The 'require' script from http://requirejs.org/docs/download.html#requirejs.
The node-opcua folder with the console command
npm install node-opcua.

node-opcua is not intended to run inside a browser as it relies on nodejs specific features such as filesystem access, crypto and so on.

You need to use browserify if you want to use that module in client. You will also need to look at how to use browserify with file system access (it can be done if paths are known ahead of time).

Where to place JS files for NodeJS to see them

I've just installed NodeJS on my Mac, and i got it working in the terminal, using inline scripting like "console.log('Hello world'); works fine.
But where do i place JS files for NodeJS to find them? Can i specify the root folder NodeJS to look for file in?
I followed this guide: http://nodeguide.com/beginner.html#learning-javascript
but i cannot get any of the samlpe to work where i reference a script file.

You put them in whatever folder you want. It is common practice to put each application in a different folder.
Then you run node.js like this:
node /path/to/file.js
Or like this:
cd /path/to/
node file.js
Where file.js might look something like this:
console.log('hello world');

You'll have to navigate to the correct folder "manually", in the Node Command Line Interface (CLI).
If you need to change drives, type the drive letter and a colon to switch to that drive, like so;
C:> (<- this is the line prompt, yeah? Just add this after it -> D:
That changes the drive. Now write cd (CD = "Change Directory") and the name of the direcotry you want to go to the directory your stuff is in:
D:> (<- the new prompt. Write something like this after it: ->) cd myprosject\subfoldername
D:\myproject\subfoldername> (<- your new line prompt - if "myproject\subfoldername" exists)
now ask node to execute your script (that is stored in myproject\subfoldername, like so;
D:\myproject\subfoldername> node helloworld.js
Remember to write "node" first - otherwise the command won't go to node, but to the OS, which will probably just open up the js file in a text editior instead of running the goodies inside.

It is very easy.. Go to your command line. navigate to the file location..
then simply run the node helloworld.

I'm not sure I understand. it doesnt 'look' anywhere for your .js files you point at them when you run node. Like so, on the command line:
node mynodeapp.js
If you're meaning where does it look for your .js files as modules, when requirign them, like so:
var mymodule = require("mymodule");
Then it will look inside a folder names node_modules. But I'm sure you're looking for my first example above.