I am trying to use the wonderful Daff library by Paul Fitz in a script designed to bring some version control to a google sheet Im working on. However I can't seem to include the javascript file in the script. I've tried importing it as an html file with tags, and with an eval() call on an external source but both have produced either syntax errors or Undefined Exports errors. Any idea what this means? with a little research I see that this means node.js isn't included? Anyway around this or way to include library in the script? Here is external source.
The Answer Provide by Mr. Fritz himself involved deleting the first line of the file "#!/usr/bin/env node" and then wrapping the entire code in an init function to then call from outside!
Related
I have a JavaScript file that's a generated parser (let's call it MyParser), which I am using in an add-on for Google Forms.
It needs to be used in the client side's Sidebar.html where I'm including it with HtmlService.createHtmlOutputFromFile('MyParser.js').getContent();, which means it must be an .html file as far as I understand. Then it must be used on the server side where I have it in a file MyParser.js.gs.
With my current solution, it's duplicated in my file structure:
Code.gs
MyParser.js.gs
MyParser.js.html
Sidebar.html
Is there a way I can make this work without having two files? Edit: As I understand it, libraries are only for the server side.
If not, any hints to making the updating of the two files more robust (currently it's manual copy/paste)?
Edit: According to the best practices, one must wrap the JavaScript inside a <script> tag inside the .html file:
Notice that the included files contain <style> and <script> tags because they're HTML snippets and not pure .css or .js files.
So it seems it's not easy to have just one file.
As far as I could tell, there's no way to reuse a single file and respect Google's best practices.
My solution, following #tehhowch's advice, was with #google/clasp and doing local development.
To build the parser (in another GitHub project), I use npm-run-script. So, I just appended a && bash makeHTML.sh to the build script.
Inside makeHTML.sh I wrapped the built MyParser.js file in a <script> tag with:
#!/usr/bin/env bash
{ echo "<script>"; cat MyParser.js; echo "</script>"; } > MyParser.js.html
Since I'm using bash it's not a true node.js solution (won't run unless there's bash installed). If someone knows of a better way to pull off the wrapping that's 100% node and doesn't require installing a whole bunch of other modules, feel free to edit the answer.
As your add-on has just few files you might use ScriptApp.getResource(filename).getDataAsString() to get the content of a .gs file and add it to the sidebar HttpOutput object enclosed in <script> tags.
Code.gs
function showSidebar(){
const htmlOutput = HtmlService.createHtmlOutput('<h1>My Sidebar content</h1>');
.append(`<script>${ScriptApp.getResource('JavaScript').getDataAsString()}</script>`);
SpreadsheetApp.showSidebar(htmlOutput,'My Sidebar');
}
JavaScript.gs
To keep things simple, this file should contain only reusable (server-side + cliente-side) JavaScript
function myFunction(){
console.log('My function ran successfully');
}
The above over simplistic code example might be applied to a bit more complex projects and will keep you away from having to use CLASP.
Contrary as happens with .gs and .html files, so far I was unable to make ScriptApp.getResource(filename).getDataAsString() to work to pull reusable JavaScript from .gs files hosted on a Google Apps Script library. Anyway, it's still possible to stay away of CLASP, one option might be to use Advanced Service Google Apps Script API, another might be to host the shared JavaScript and imported from Google Drive or from another host by using Url Fetch service.
Related
Is it possible to read the contents of a Google Apps Script from another Script
HTML and JavaScript from another server?
Server side HTML Form validation?
Is it possible to import an external library (in this case Tabulator) into GAS? I've tried using the eval() function and it simply says Syntax Error whenever I attempt to use it. Many thanks
Managed to figure it out, since GAS only allows HTML and GS files in the project I had to reference and include the library from a server repository in the html file
I'm following The Coding Train and learning about the p5.js library. In this particular exercise, I want to work with potentially massive integers, so I looked around and found peterolson/BigInteger.js.
I attempted to include this script in my project in the same way the p5.js library itself is included, and as suggested in BigInteger's readme:
<script src="http://peterolson.github.com/BigInteger.js/BigInteger.min.js"></script>
However, after doing so, I still get bigInt is not defined errors when I try to reference it from my script.js.
Could anyone help me understand what I'm missing? You can see my project in the p5.js web editor here!
Questions like these are best answered by looking at your developer tools. Check out the JavaScript console and the network log to see the error you're getting.
Basically, you can't reference files on GitHub the way you're trying to reference BigInteger.min.js. You either need to find a CDNS that hosts the file for you, or you need to upload it to your sketch and reference it via a relative url.
I am trying to follow the practice of compiling all my javascript files and js plugins etc into one single javascript file, which then gets included into my website. So far I have been using gulp with npm for this purpose, but I am really struggling when it comes to the point that the libraries I want to include don't work like that. For example Google Maps API. So, how can I deal with such cases ? I have been asking around and I hear that there is not a way to "include" a javascript file like you can include a php file, but is this the final answer ?
I know you can include other files with jQuery on runtime, but that way you are not avoiding the additional http calls, remember the ideal case is to call one javascript file which has all the js code you need.
Even when I am using require in javascript, the required file must have a proper format and I have to assign it to a variable bla bla bla, but when I include a script like this <script type="text/javascript" src="myjsfile.js"></script> everything is included in my scope properly.
How can I work around this ? Would it be a good practice if a javascript compiler like gulp copied the contents of all my javascript source files and pasted them into one single merged file ? Wouldn't that work the same way as calling all those files with ?
Well, I started this question because I am having troubles with the google maps api, but the problem is more general, so if you can help me please answer the above questions too. Anyway in the google maps api case, I am working with it perfectly fine when I include it like this
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=Mycallback">
</script>
But how can I merge this into my minified way of including libraries ? I tried to use some npm libraries that integrate with google maps api (like this for example), but I am getting CORS problems and I think this is an expected behaviour.
Thanks in advance ! Sorry if something sounds stupid, I am trying to learn the good way of coding.
Decent question.
I'm not an expert but there is my subquestion/answer:
async attribute lets load html and script(s) simultaneously. If map is main feature of site, I would place <script> on top of loading html file so its not always rule to place in to the bottom of <body>.
I'm writing a CKEditor plugin specific to my Web app. Until now, I've successfully kept my own files outside of the CKEditor code structure, but the only documentation I can find about the plugin creation process (being a user-made tutorial, no less) says to just shoehorn my plugin code into ckeditor/_source/plugins.
Is this really the only way to go? Am I stuck with commingling my code with CKEditor release code, or is there a way to tell it where to load plugins from? A PLUGINPATH setting, if you will?
Looking at the tutorial you posted, I see that the section called Plugin Configuration uses CKEDITOR.plugins.add to load the plugin resources. Have you tried using CKEDITOR.plugins.addExternal instead? The API documentation for it can be found here.
You want to load the uncompressed, unpacked plugins to load for debugging purposes right?
Just do this. Refer ckeditor_source.js instead of ckeditor.js. That way your created plugin inside the ckeditor/_source/plugins will run.
Read Minimum Setup for CKEditor with a microscope :)
There is a line like this here
_source — this directory contains CKEditor source code. It is needed
only if you intend to use the
ckeditor_source.js script and load
CKEditor from source files.
Too little documentation for a wonderful editor!
Update:
And inside the wonderful tutorial link you have provided, George Wu has mentioned that in the first paragraph also.
During development, you will want to
execute from source code by using
ckeditor_source.js instead of
ckeditor.js.
Now, create
ckeditor_source\plugins\footnote
folder and plugin.js under that
folder.
BTW, I found Tutorial create external plugin for CKEDITOR helpful too.