I'm looking for a way to implement "Plugins" for my Electron tool.
Below is a pseudo example of how I'm thinking it would work
Supply .js/.zip/plugin file
File would contain name of plugin, and it's category (Global, Team centric, Misc)
File would contain HTML for the GUI, which get's placed in a div designated for tool space. This name would be added as an option to the necessary Select, as well as logic added to pull in the HTML to the same div
In the tool, select the plugin file:
page will load the JavaScript script, and add option to select along with logic to switch to the plugin
The hope is to automate my current process.
Currently I'm manually updating the index page to reference the new JavaScript script, and to add the option on the select
The JavaScript Script has logic in it looking at the Select, and looking to see if the option was selected
which then pulls in it's own HTML via a function within
Is there anything I can reference/utilize to make this work?
After 4+ months of working on this, I've managed to get this to work. I will try to outline my approach.
Each "plugin" or "tool" will need it's own .js file
the js file should contain an exports.html function that will return the html for the tool
the js file should contain an exports.Events function that adds all relevant event listeners
create a json file cataloging each tool, along with information needed i.e. a description, image path, .js file path, etc.
require the .js file when selected, load the html and the events
parse the json to figure out which tool to load along with needed info
all i need to do is update the json file and upload the .js file to add a new plugin.
I developed an electron app using vue as the front-end.
My idea was to develop plugins as vue plugins and publish via npm.
I used live-plugin-manager to install and uninstall plugins.
The dependencies were automatically removed by making use of a counter
The only problem I faced was how to load these installed plugins into my main app.
The workaround I found was posted as answer to my own question at How to use electron to load the vue plugins installed dynamically into a plugins folder
Hope it helps
I know I'm a little late to the party but I encountered the same problem. To solve it I have built a plugin framework for Electron called Pluggable Electron and it is available on npm.
The framework handles the lifecycle of plugins, provides as npm packages, like installation, activation, removal, etc. The plugins can then be called on at any time to exend the core app functionality.
The framework is still under development but you can find a 1st version here: pluggable-electron.
I expect it is too late for Marker but still answering here for anyone else that might have this question.
Related
I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.
Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).
I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...
Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.
Every time we release a new version of our software which is bundled using Browserify, we are finding that we need to ask our users to clear their cache using the regular methods of CTRL+F5 or diving into the browser settings. It is not ideal when there are a thousand or so users. We are trying to work out a way that we can perhaps get around this. I am open to all sorts of options.
Our project is ReactJS based, so runs in the browser and connects to back end services via a RESTful API. We do track which version is loaded and this is visible from within the console. Using the version number we can compare on two different machines that one user is running the latest version whereas someone else may not be.
The code is bundled into two separate files and I feel that this is where we should be looking.
You need to change the file name on each new release.
A hash of the file is an appropriate thing you could add.
Check out md5ify to add this to your project build.
If you implement this yourself, make sure to also load the correct filename in your index.html file.
Edit:
To automatically load the correct file you need to have a placeholder in your main html.
Then you need a manifest.json file that looks like following:
{
"main.js": "main.[HASH].js"
}
This has to be created automatically after the bundling.
Now you can replace the placeholder with correct asset by doing a lookup in the manifest file.
You either have to write your own scripts for this or use something like gulp together with browserify.
Another solution would be webpack
I'm trying to figure out a way to automatically generate an ApplicationCache manifest file from all the HTML,CSS,JavaScript and images files used by our website.
We need this because we need to support offline usage of the website. More precisely, offline usage of an ArcGIS API for JavaScript webapp.
We are not using service workers instead of the ApplicationCache because supporting iOS is a critical requirement and service workers are not supported at all on iOS, on any browser.
The idea is that I'll manually call a function after the site is fully loaded that will dynamically create the text to be used for the new manifest. Then manually copy/paste it in the manifest file. So it's something I would only do when something in the site changes and the manifest file needs to be updated.
This tool, ManifestR, is very close: http://westciv.com/tools/manifestR/
but has two issues with it:
1- It does not handle image file URLs found in CSS files properly. For instance if it finds url(../images/myimage.png) it will add the relative link ../images/myimage.png directly in the manifest file instead of adding the non-relative link like www.mysite.com/images/myimage.png.
2- It does not list any of the scripts loaded through dojo.require (AMD modules).
I'm thinking of using similar code to fix these issues and compile the list of files. I already see how to fix #1, but can't figure out how to fix #2.
So, using JavaScript, how can I find the list of all script URLs used by the website, not just those loaded trough tags (found in window.scripts object), but those loaded using AMD modules as well?
Basically I want to compile the same list that Chrome is showing me for the website in the Sources pane.
Ex:
I'm thinking that if this isn't available anywhere, maybe I could create a proxy function to dojo.require that keeps tracks of all files loaded through AMD.
But I wanted to ask here first, maybe I missed a tool of script that already does this? Or maybe my plan isn't good?
Thanks
I've never used ApplicationCache for an ArcGIS API for JavaScript app, but I would recommend that you first serve up a custom Dojo build of your application in order to bundle your code into one or more build layers. If you configure your Dojo build properly (no small feat) you should know the exact scripts that will be required.
Also, I'd suspect that once you figure out how to get the list of scripts, you may have special considerations in order to get the Dojo AMD loader to be able to use the cached files. See: dojo and the offline application cache
Good luck.
I have installed webstorm and trying to create a simple angular js program.
I have created an empty project in webstorm, then added the angular.js file in libs directory. Then when I try to write code for angular js the auto completion is not working.
Here is the screenshot of the issue.
Please help me how to create angular js programs in webstorm?
Update:
Now I have added Angular JS as a dependency by following the steps Installing AngularJS Manually in JetBrains Doc. Also removed the angular js file from my project which was present as part of my 1st image in this post.
Even then I am not able to see the auto-completion working. I have verified that the angular js plugin is enabled in my webstorm. Please let me know what could be the issue?
Update:
I have plugin for Angular JS already enabled in my webstorm, please check below image:
Not really an answer (have you saved your HTML, why not put your JS code into external files)... but why not create a project with a generator using Yeoman - http://yeoman.io/ That will give you a better app structure, build tools, package managers, unit tests... and your IDE should be better equipped for this.
This may help too: http://blog.jetbrains.com/webstorm/2014/07/how-webstorm-works-completion-for-javascript-libraries/
There is a AngularJs plugin for Webstorm. This will give you autocomletion in html files. See this tutorial how to install it:
youtube tutorial
There is even a documentation page form JetBrains which explains how to creat a AngularJs Project:
JetBrains Doc
Found in WebStorm doc
Configure AngularJS as a WebStorm JavaScript library, to let WebStorm recognize AngularJS-specific structures and provide full coding assistance:
Open the Settings dialog box, and click JavaScript Libraries.
In the Libraries area, click the Add button.
In the New Library dialog box that opens, specify the name of the library.
Click the Add button add next to the list of library files and choose Attach Files or Attach Directory on the context menu, depending of whether you need separate files or an entire folder.
Select the Angular.js or Angular.min.js, or an entire directory in the dialog box that opens. WebStorm returns to the New Library dialog box where the Name read-only field shows the name of the selected files or folder.
In the Type field, specify which version you have downloaded and are going to add.
If you added Angular.js, choose Debug. This version is helpful in the development environment, especially for debugging.
If you added the minified Angular.min.js, choose Release. This version is helpful in the production environment because the file size is significantly smaller.
Or check out this blog post
I want to use a specific file in Webstorm IDE for help with the autocomplete on other files, Im using the module pattern so one file has the main methods used for the others modules. So in Webstorm I added this file as a library as is explained here http://www.jetbrains.com/webstorm/webhelp/configuring-javascript-libraries.html .
The problem is that now that is a library I CANT edit it any more or add new code to this file. So I have to remove it from the Webstorm scope to be able to edit it. And then add it again in the scope(library) when Im working in the other files and has the ability to use the autocomplete.
So how can I add this file as a library AND tell webstorm that he should let me add and edit current content for this file?
Library files write protection was implemented by design to prevent users from making accidental modifications to them. Recommended workflow is to open library files as separate project for editing, or include them not as "library" but as a separate content root. http://youtrack.jetbrains.com/issue/WEB-1065 requires making the current behavior optional. You are welcome to vote for it