Develop Reference

Cant use import in an Javascript file / using an framework config

I have a javascript folder which is basically a config file for the framework I'm using ( Luigi.js )
Now I need to import a provider into that config file but it does not let me, the next error appears :
Cannot use import statement outside a module
Here is the config file :
import OpenIdConnect from '#luigi-project/plugin-auth-oidc';
const myData = () => {
Luigi.setConfig({
auth: {
use: 'openIdConnect',
openIdConnect: {
idpProvider: OpenIdConnect,
authority: 'https://localhost:3000.com',
client_id: 'client',
scope: 'audience:server:client_id:client openID profile email groups',
redirect_uri: '',
automaticSilentRenew: true,
accessTokenExpiringNotificationTime: 60,
},
disableAutoLogin: false,
}, ...
}
If anyone is interested to read the framework docs here is the link : https://docs.luigi-project.io/docs/authorization-configuration

How to extend core modules of Vue Storefront

I want to override an action from cart module store. I am trying to extend this CartModule by following this link
Extending and Overriding Modules Doc
I have created a file /src/modules/cart/index.ts with following code
import { VueStorefrontModuleConfig, extendModule, VueStorefrontModule } from '#vue-storefront/core/lib/module'
import { CartModule } from '#vue-storefront/core/modules/cart'
import { cartModule } from './store'
const cartExtend: VueStorefrontModuleConfig = {
key: 'cart',
store: {modules: [{key: 'cart', module: cartModule}]},
afterRegistration: function () {
console.log('Cart module extended')
}
}
extendModule(cartExtend)
export const registerModules: VueStorefrontModule[] = [CartModule]
I am getting error that CarModule type does not match with VueStorefrontModule
Also I don't know what to do next in order to make it effective. Docs are not clear about it. Please help. Thanks

If you want to overwrite action of module you don't want to extend module but store.
Here is example:
Vuestorefront has CartModule (in core) and you need to change code of action refreshTotals.
Code your in file /src/modules/cart/index.ts:
import {StorefrontModule} from '#vue-storefront/core/lib/modules';
import {extendStore} from '#vue-storefront/core/helpers';
const cartModule = {
action: {
async refreshTotals({dispatch}, payload) {
//
// your new (and better!) code ;-)
//
}
},
}
export const MyAwesomeCart: StorefrontModule = function () {
extendStore('cart', cartModule);
}
In last step register this your new module under /src/modules/client.ts:
..
...
import {CartModule} from '#vue-storefront/core/modules/cart';
import {MyAwesomeCart} from "modules/cart/index";
export function registerClientModules() {
registerModule(CartModule); // original module
registerModule(MyAwesomeCart); // your new overwiritng module
...
..

MeteorJS javascript function defined in package is undefined

I have created a custom package in Meteor adding javascript to the application.
My package.js:
Package.describe({
name: 'markel:theme',
version: '1.0.0',
summary: 'Theme package',
});
Package.onUse(function(api) {
// Import all JS files required by the template
api.addFiles(['assets/js/custom.js']);
});
In custom.js:
function theme_test() {
console.log('Theme test');
}
When meteor loads the package in the application, it places the function in IIFE. So the javascript is in (function(){here}). So my function will return undefined.
How can I define that function and use it?

I hope one of these options will solve your issue, as I found it hard to reproduce any undefined values.
Option 1 - Use modules
While you can auto-add files via api.addFiles you can optionally still export them explicitly:
package.js
Package.describe({
summary: 'Theming',
version: '1.0.0',
name: 'marcelweidum:theme',
git: 'https://github.com/MarcelWeidum/stack-question.git'
});
Package.onUse((api) => {
api.use('ecmascript') // required to use import/export
api.addFiles([
'js/custom.js'
], 'client');
api.mainModule('main.js')
});
package/js/custom.js
export const theme_test = function theme_test () {
console.log('Here am I!');
}
console.log('Loaded');
package/main.js (in root folder of the package)
export { theme_test } from './js/custom'
client/main.js
import { theme_test } from 'meteor/marcelweidum:theme'
theme_test()
will give you on the console:
Loaded
Here am I!
Option 2 - use api.export
You can export the theme using an implicit global that is made accessible immediately using api.export:
package.js
Package.describe({
summary: 'Theming',
version: '1.0.0',
name: 'marcelweidum:theme',
git: 'https://github.com/MarcelWeidum/stack-question.git'
});
Package.onUse((api) => {
api.addFiles([
'js/custom.js'
], 'client');
api.export('MyTheme')
});
*package/js/custom.js*
function theme_test () {
console.log('Here am I!');
}
MyTheme = MyTheme || {}
MyTheme.theme_test = theme_test
console.log('Loaded');
*client/main.js*
```javascript
MyTheme.theme_test()
will give you on the console:
Loaded
Here am I!
Option 3 - Import file explicitly
This will hover load the file's content only at the point it's imported
package.js
Package.describe({
summary: 'Theming',
version: '1.0.0',
name: 'marcelweidum:theme',
git: 'https://github.com/MarcelWeidum/stack-question.git'
})
Package.onUse((api) => {
api.use('ecmascript')
})
*js/custom.js* (in root folder of the package)
```javascript
export const theme_test = function theme_test () {
console.log('Here am I!');
}
console.log('Loaded');
package/js/custom.js
export const theme_test = function theme_test () {
console.log('Here am I!');
}
console.log('Loaded');
client/main.js
import { theme_test } from 'meteor/marcelweidum:theme/js/custom'
theme_test()
will give you on the console:
Loaded
Here am I!
Option 4 use bare option, in case the file is used by a compiler plugin:
If you don't want the file to be wrapped inside a closure, for example because it will be used by a custom compier plugin, then add the bare option:
Package.describe({
summary: 'Theming',
version: '1.0.0',
name: 'marcelweidum:theme',
git: 'https://github.com/MarcelWeidum/stack-question.git'
});
Package.onUse((api) => {
api.addFiles([
'js/custom.js'
], 'client', { bare: true });
});
This will still load the file but you will have to use your isobuild plugin to handle the file.

How to bind console.log to "l" in vue.js?

main.js has this code
window.l = function () { }
try {
window.l = console.log.bind(console)
} catch (e) { }
which works in non-Vue apps. However, when calling
l("test")
from a Vue action/method, it complains it isn't defined.
How can that work?
Reasoning: need to output some debugging data, with as less typing as possible.

When you want to add global-level functionalities to Vue, you should generally use mixins or plugins.
For the next examples, I assume you are using vue-cli with the complete webpack template. Moreover, we will use App.vue as a practical reference, but you can apply the same principles to other components...
Mixins
Create a mixin named log.js (in a mixins folder) with the following code:
export default {
methods: {
l (...args) { // rest parameters
console.log(...args) // spread operator
}
}
}
Open App.vue, import your mixin and use it:
<script>
import log from './mixins/log'
export default {
name: 'app',
mixins: [log],
created () {
this.l('Foo', 'Bar') // Foo Bar
}
}
</script>
Plugins
Create a plugin named log.js (in a plugins folder) with the following code:
export default {
install (Vue, options) {
Vue.prototype.$l = console.log.bind(console)
Vue.l = console.log.bind(console)
}
}
Open your main.js and declare your global plugin:
import log from './plugins/log'
Vue.use(log)
Open App.vue, import Vue and use your plugin:
<script>
import Vue from 'vue'
export default {
name: 'app',
created () {
this.$l('Foo') // Foo
Vue.l('Bar') // Bar
}
}
</script>
You might say: "Hey, why should I have to write this or Vue? I just wanna write l, that's all!". Well... This is actually how Vue has been designed. In order to provide global functionalities (shared by all components), you have to add static properties to the Vue object or prototype properties (Vue.prototype) that are accessible through this in Vue instances.
EDIT
I have just thought about an alternative solution...
You can edit your index.html to add this:
<script>
var l = console.log.bind(console)
</script>
Then, to avoid ESLint errors, you should also edit your .eslintrc.js file to reference your new global variable:
globals: {
l: true
}
The file looks like this:
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
globals: {
l: true
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
Restart your dev server. Now you should be able to use l in your code:
<script>
export default {
name: 'app',
created () {
l('It works!')
}
}
</script>

Assign console.log like this.
window.l=console.log;

Angular2 / Electron application using electron API within the angular2 ts files

I have setup an angular2 / Electron app similar to the explanation in this video : https://www.youtube.com/watch?v=pLPCuFFeKOU. The project I am basing my code on can be found here : https://github.com/rajayogan/angular2-desktop
I am getting the error:
app.ts:16Uncaught TypeError: Cannot read property 'on' of undefined
When I try to run this code:
import { bootstrap } from '#angular/platform-browser-dynamic';
import { Component } from '#angular/core';
import { MenuComponent} from './menu';
import { ConfigEditorComponent } from './config-editor';
import { remote, ipcRenderer} from 'electron';
let {dialog} = remote;
//Functions used for select server xml callbacks.
const ipc = require('electron').ipcMain
const xml2js = require('xml2js')
const fs = require('fs')
var parser = new xml2js.Parser();
ipc.on('open-file-dialog', function (event) {
dialog.showOpenDialog({
title:"Select zOS Connect server.xml",
properties: ['openFile', 'openDirectory'],
filters: [
{name: 'XML', extensions: ['xml']},
{name: 'All Files', extensions: ['*']}
]
}, function (files) {
if (files){
fs.readFile(files[0], function(err, data) {
parser.parseString(data, function (err, result) {
console.dir(result);
process_server_xml(event,result);
})
})
}
})
})
function process_server_xml(event,json){
console.log("oh hello!")
event.sender.send('selected-directory', json)
console.log("oh im done!")
}
#Component({
selector: 'connect-toolkit',
templateUrl: 'app.component.html',
directives: [ MenuComponent, ConfigEditorComponent ]
})
export class AppComponent {
constructor() {
var menu = remote.Menu.buildFromTemplate([{
label: 'Raja',
submenu: [
{
label: 'open',
click: function(){
dialog.showOpenDialog((cb) => {
})
}
},
{
label: 'opencustom',
click: function(){
ipcRenderer.send('open-custom');
let notification = new Notification('Customdialog', {
body: 'This is a custom window created by us'
})
}
}
]
}])
remote.Menu.setApplicationMenu(menu);
}
}
bootstrap(AppComponent);
I think the problem may be:
const ipc = require('electron').ipcMain
const xml2js = require('xml2js')
const fs = require('fs')
var parser = new xml2js.Parser();
Is it possible require doesn't work here, and somehow I need to use import statements instead from my ts files? If this is the case how do I use the import in order to get the ipcMain object and my xml2js etc?
Why would that be the case? How can I make require work within the ts files if this is the problem.
Note that if I remove the require lines, and all the ipc.on code everything runs as expected and works fine (other than the fact that the ipc event is never received ;)

Calling ipcMain doesn't work because you're not on main (i.e., the electron side code, which is on electron index.js file), your are on renderer (web page). Therefore you must use ipcRenderer instead, which is already imported using es6 import syntax on top of your app.ts file. And if you want to make something using electron ipcMain, it have to be done from the electron code side.
import {remote, ipcRenderer} from 'electron';
Electron ipc notes:
ipcMain Communicate asynchronously from the main process to renderer processes.
ipcRenderer Communicate asynchronously from a renderer process to the main process.