I'm using one of the skeleton-navigation, skeleton-typescript.
I'm trying to import Electron.remote so I can close the electron window from within the JS. This is what I have in config.js:
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"node_modules:*": "node_modules/*"
},
map: {
"electron": "node_modules:electron/index.js",
}
and in my JS file I import like this:
import * as electron from 'electron';
but I get error regarding fs.js not found in path:
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9000/dist/fs.js
Can someone help on how I can fix this issue?
depends on the loader/bundler strategy you picked
electron has nodes require() defined.
you want to redefine that before booting up your app that relies on AMD require
https://github.com/electron/electron/issues/303
TL;DR
you want to assign nodes require to another variable
window.node_require = require
and then delete the original
delete require
only after this you reference a script with your app
and inside your app you use node_require() to load node modules
here is the relevant comment on: supporting electron modules in aurelia
This is how I fixed my issue for Aurelia Skeleton Typescript with JSPM & SystemJS: I put in index.html head which is my entry:
<script type="text/javascript">
window.node_require = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
Then I set nodeIntegration: true for BrowserWindow.
And in my TS file:
declare global {
interface Window {
node_require: any;
}
}
var remote: any;
if (typeof window.node_require == "function") {
remote = window.node_require('electron').remote;
}
closeApp() {
var window = remote.getCurrentWindow();
window.close();
}
Related
So, I've set up my rails 7 application by doing the following.
rails new .
To add bootstrap I've implemented it with importmap (no webpacker) as following
./bin/importmap pin bootstrap
which loaded these lines (I added the preload: true)
pin 'bootstrap', to: https://ga.jspm.io/npm:bootstrap#5.1.3/dist/js/bootstrap.esm.js', preload: true
pin '#popperjs/core', to: 'https://ga.jspm.io/npm:#popperjs/core#2.11.2/lib/index.js', preload: true
then on my application.js, I added
import "bootstrap"
import "#popperjs/core"
and I was able to use the toast element by doing as follow
# toast_controller.js
import { Controller } from "#hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
const toast = new bootstrap.Toast(this.element, {
delay: 5000,
animation: true,
autohide: true
})
toast.show()
}
}
and it was working well, But I started facing issues with bootstrap when trying to use the tooltip on my menu
# layout_controller.js
import { Controller } from "#hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
[].slice.call(document.querySelectorAll('[data-bs-togle-secondary="tooltip"]'))
.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {placement: "right"})
})
}
}
the reason for it is because popperjs uses process.env.NODE_ENV which doesn't exist since I didn't set up webpacker
so I had to do something ugly on my application layout and add it like this
<script>
const process = {}
process.env = {}
process.env.NODE_ENV = "<%= Rails.env %>"
</script>
Is there a better approach/fix for this kind of issue?
At the moment of writing this 11/04/2022 there is not a clear solution for now and your mentioned approach with defining in const process in tag works, one issue with that is that with importmaps+turbolink approach it will rise "Uncaught SyntaxError: redeclaration of const process".
Probably for now it's best to just follow this thread https://github.com/rails/importmap-rails/issues/65 as this issue is mentioned in the comments there. One of the quick fixes mentioned there is similar to yours: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960. With a combined solution of yours and the one in the comments, it seems that this works best for now and there is no redeclaration error.
<script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>
If the solution is introduced for this issue either on importmaps or popperjs side, then please update this comment or introduce a new answer.
I am trying to start a music player. For that I created a json-file that describes the path where the songs are located. Also the amount of songs that I have and the author.
{
"songs":[
{
"author": "Guns and Roses",
"name": "Welcome to the Jungle",
"url": "./Resources/welcome-to-the-jungle.mp3"
}
]
}
I am building this application in electron. In the html-file I have added one script with the name 'functions.js'.
<script type="module" src="functions.js"></script>
In that function I wanted to import the module fs and read my json-file to start working. But I am missing something. I get a message error that says I can't import the fs-module.
import fs from 'fs'
const file = fs.readFileSync('./Resources/metadata.json')
I tried also,
import fs from '../node_modules/fs'
const file = fs.readFileSync('./Resources/metadata.json')
and also add a script to the html file index.js
<script src="fs.js"></script>
But nothing works... what is the correct way to import the library into my script?
Import it with require
const fs = require('fs')
If it throws the error saying require is not defined, enable node integration in your main process, this will allow your window to use Node's require function:
mainWindow = new BrowserWindow({
...
webPreferences: {
nodeIntegration: true
}
})
I try the last hours to integrate EasyAutocomplete into RAILS 6. But not so easy.
What I did :
Install Javascript Package with yarn:
# yarn add easy-autocomplete
Add this in the file app/javascript/packs/application.js
import “easy-autocomplete”
Add this in the file app/assets/stylesheets/application.css
*= require easy-autocomplete
*= require easy-autocomplete.themes
Then start the Rails Server and refresh the Web Page.
Then try to use it. Go into the developer console and type :
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
task_name_search_field was previously defined as id :
<input type="search" class="form-control" id="task_name_search_field">
I got this message:
TypeError: $(...).EasyAutocomplete is not a function
Any idea ?
I had the same problem. Turbolinks does not give access to the script, the code needs to be run after it is loaded, something like this:
document.addEventListener("turbolinks:load", function() {
var options = {
data: ["otto", "hans", "paula"]
};
$("#task_name_search_field").easyAutocomplete(options);
});
In order for the autocomplete to work, you need to add a script file to the application.js like this:
require("packs/youfile")
If it helps you, here is an example of my code:
document.addEventListener("turbolinks:load", function() {
$input = $("[data-behavior='autocomplete']")
var options = {
getValue: "full_name",
url: function(phrase) {
return "/search.json?q=" + phrase;
},
categories: [
{
listLocation: "cameras",
header: "<strong>Cameras</strong>",
}
],
list: {
onChooseEvent: function() {
var url = $input.getSelectedItemData().url
$input.val("")
Turbolinks.visit(url)
}
}
}
$input.easyAutocomplete(options)});
I suppose you wouldn't have included jquery in your application.js. You need to do explicitly as it doesn't get included automatically with rails 6 app.
I ran into a similar issue. I'm a n00b at Webpacker, but by default it doesn't seem to compile in the same order in which plugins are included.
To get around the issue I did this workaround which just wraps the plugin code in an anonymous jQuery function, like so:
(function($) {
//Eac plugin code
})(jQuery);
https://github.com/pawelczak/EasyAutocomplete/issues/200#issuecomment-212277620
Maybe there is a way in the configs to force compilation in the correct order. This looks promising https://stackoverflow.com/a/43005332/148390
Add script-loader to package.json then add
import 'script-loader!jquery/dist/jquery.min'
in app/javascripts/application.js
Check in your browser that $().jquery yields a proper result.
So i'm working in ruby on rails, and I've using it with AngularJS 1 for the first time, and therefore am setting up the unit testing for angularjs inside rails for the first time. I can test rails with rspec no problem, but i've been struggling to test angularjs, currently I'm working with teaspoon-jasmine and angular-mocks to test a simple angular controller, but I run into several problems. The first file below is my test file, I currently have it using angular.mock.module/inject and the error i'm getting is "Failed to instantiate module angularrApp due to..." it's basically saying I haven't created or loaded angularApp anywhere, I though mock was supposed to create a test module? If I the module to "angular.module("name", [])" like I would normally create an angular app, I run into more problems such as the mainController hasn't been created. I'm just overall having issues getting this to work properly, any suggestions? I'm trying to get just the simple first expect to work before I move on to the actual tests. And I am requiring angular and angular-mocks in the spec_helper.js file, all the files below. Would it help to require the file that creates the angular app in my spec_helper.js? I've tried but can't get it to work since one is in the spec directory, while my angular app is in app/assets. Also if it helps, here is the link to the tutorial I based this code off of http://angular-rails.com/find_and_browse.html
mainController_spec.js (test file)
'use strict';
describe("mainController", function() {
var scope,
ctrl,
location,
resource;
var setupController = function() {
angular.mock.inject( function($rootScope, $resource, $controller) {
scope = $rootScope.$new();
resource = $resource;
ctrl = $controller('mainController', {$scope: scope, $resource: resource });
})
}
beforeEach(function(){
angular.mock.module("angularApp");
setupController();
})
it('should work', function(){
expect(true).toBe(true);
// expect(scope.games).toBe([])
})
});
mainController.js
'use strict';
myApp.controller('mainController', [ 'mainFactory', '$scope', '$resource', (factory, scope, resource) => {
scope.games = [];
factory.populateTable((data) => {
scope.games = data;
})
}]);
angular-app.js
'use strict';
const myApp = angular.module('angularApp', ['ngRoute', 'ngResource']);
// routes in another file
For those that are interested, the issue I was having was that either teaspoon-jasmine, phantomjs or both don't recognize javascript es6 syntax, if there is any es6 in a file that would normally be required, the entire file and it's contents are ignored without any error messages. Once I reverted my angularApp and controller code to ES5, my problem was solved.
I copied the jQuery passthrough example from here http://angular-ui.github.com to this fiddle http://jsfiddle.net/ilyaD/Xe48t/3/ and it is not working. I am getting ui is not defined
this is the JS:
angular.module('ui.config', []).value('ui.config', {
// The ui-jq directive namespace
jq: {
// The Tooltip namespace
tooltip: {
// Tooltip options. This object will be used as the defaults
placement: 'right'
}
}
});
what did I miss?
UPADTE:
I added ui to angular.module('ui.config', ['ui']).value('ui.config', { but still not working http://jsfiddle.net/Xe48t/9/
Actually, you're not supposed to declare the value on the ui.config module. You declare it on your own app and it will take precedence:
angular.module('myApp', ['ui']).value('ui.config', {
jq: {
// whatever
}
});
Note that this is defined on myApp
It also helps if you:
run your JS in the right place (head)
have AngularJS initialize properly (using ng-app)
and load the bootstrap lib and css
http://jsfiddle.net/Xe48t/12/
Make sure you're including the AngularUI javascript file, and then you want to use the string "ui".
angular.module('ui.config', ['ui'])
You missed the ui dependency:
angular.module('ui.config', ['ui']).value('ui.config', {
http://jsfiddle.net/Xe48t/4/