RequireJS: require a module return a function instead of a object - module

I'm noticing a strange behaviour with RequireJS trying to assign a simple module value directly to a variable, like this:
App.tables = require(['appTables']);
The result of this call is that App.tables contain this function:
localRequire(deps, callback, errback)
while my appTables.js looks like this:
define({
users: {
name: 'tables.users',
data: {
name: {
visible: true,
hide: false,
display: 'Name'
},
surname: {
visible: true,
hide: false,
display: 'Surname'
}
}
}
});
Indeed trying to assign it in the classic way works:
require(['appTables'], function(appTables) {
App.tables = appTables;
});
So what's wrong with my first approach? Why does it return a function instead of the object? Thanks!

The simplified CommonJS format which you're using (App.tables = require('appTables')) is meant to be used within a module, as an alternative to the amd format where you assign an array of module dependencies to function arguments. It is not meant to be used in your main.js module (just use the standard require('appTables', function(appTables) { ... }); format for that).
In a module, you would wrap the require call in a define block, and pass the module name ('appTables'):
define(function(require) {
appTables = require('appTables');
... do something with appTables ...
});
See the documentation on the Simplified CommonJS Wrapper for details.
See also: Why use alternate requirejs define: define(function(require) { ... }

Related

Event only firing as inline JS statement

I have the following code in a Nuxtjs app in SSR mode.
<Component
:is="author.linkUrl ? 'a' : 'div'"
v-bind="!author.linkUrl && { href: author.linkUrl, target: '_blank' }"
#click="author.linkUrl ? handleAnalytics() : null"
>
The click event in case it's an a tag, will only fire if it's written as handleAnalytics(), but handleAnalytics will not work.
Don't get me wrong the code is working, but I don't understand why.
With classical event binding (#click="handleAnalytics), Vue will auto bind it for you because it sees it's a function.
But when provided a ternary condition, it's not auto binded but wrapped into a anonymous function instead. So you have to call it with parenthesis otherwise you're just returning the function without executing it.
To be clearer, you can write it this way: #click="() => author.linkUrl ? handleAnalytics() : null"
Note: when having a dynamic tag component, I'd suggest to use the render function instead.
This is an advanced technique, but this way you won't bind things to an element that doesn't need it (without having the kind of hack to return null).
Example:
export default {
props: {
author: { type: Object, required: true },
},
render (h: CreateElement) {
const renderLink = () => {
return h('a', {
attrs: {
href: author.linkUrl,
target: '_blank',
},
on: {
click: this.handleAnalytics
},
)
}
const renderDiv = () => {
return h('div')
}
return this.author.linkUrl ? renderLink() : renderDiv()
}
}
Documention: Vue2, Vue3
In javascript functions are a reference to an object. Just like in any other language you need to store this reference in memory.
Here are a few examples that might help you understand on why its not working:
function handleAnalytics() { return 'bar' };
const resultFromFunction = handleAnalytics();
const referenceFn = handleAnalytics;
resultFromFunction will have bar as it's value, while referenceFn will have the reference to the function handleAnalytics allowing you to do things like:
if (someCondition) {
referenceFn();
}
A more practical example:
function callEuropeanUnionServers() { ... }
function callAmericanServers() { ... }
// Where would the user like for his data to be stored
const callAPI = user.preferesDataIn === 'europe'
? callEuropeanUnionServers
: callEuropeanUnionServers;
// do some logic
// ...
// In this state you won't care which servers the data is stored.
// You will only care that you need to make a request to store the user data.
callAPI();
In your example what happens is that you are doing:
#click="author.linkUrl ? handleAnalytics() : null"
What happens in pseudo code is:
Check the author has a linkUrl
If yes, then EXECUTE handleAnalytics first and then the result of it pass to handler #click
If not, simply pass null
Why it works when you use handleAnalytics and not handleAnalytics()?
Check the author has a linkUrl
If yes, then pass the REFERENCE handleAnalytics to handler #click
If not, simply pass null
Summary
When using handleAnalytics you are passing a reference to #click. When using handleAnalytics() you are passing the result returned from handleAnalytics to #click handler.

ckeditor5 - custom container element - recursion error on paste

I'm trying to create a CKEditor5 custom element plugin - mainly for custom format/styles -- nested divs etc. Managed to be able to inject/format the elements, and I can type in them. But if I try to copy and paste text into a custom element I get a too much recursion error.
MyWidget plugin:
export default class MyWidgetPlugin extends Plugin {
init() {
const editor = this.editor;
editor.model.schema.register('my-widget', {
inheritAllFrom: '$root',
isLimit: true,
});
editor.conversion.elementToElement({ model: 'my-widget', view: 'my-widget' });
editor.commands.add('myWidget', new MyWidgetCommand(editor));
}
}
MyWidget command:
class MyWidgetCommand extends Command {
execute() {
const editor = this.editor;
const block = first(this.editor.model.document.selection.getSelectedBlocks());
this.editor.model.change(writer => {
const myWidget = writer.createElement('my-widget')
writer.insert ( myWidget, block, 'after');
writer.appendElement( 'paragraph', myWidget );
});
}
}
Inserting a widget injects this into the editor:
<my-widget>
<p></p>
</my-widget>
And I can type fine, but I can't paste. I'm guessing I got the schema wrong... have played around with quite a few different options.. but to no avail.
I didn't check it but I think that the issue is here:
editor.model.schema.register('my-widget', {
inheritAllFrom: '$root',
isLimit: true,
});
This schema rule says that <my-widget> will allow e.g. a <paragraph> inside it. But it doesn't say anything about where <my-widget> may be used. That's because $root is not allowed in any other element (cause it's a root :)).
I think that the following should work fine:
editor.model.schema.register('my-widget', {
inheritAllFrom: '$root',
allowIn: '$root',
isLimit: true,
});
Alternatively, a more generic solution should work too:
editor.model.schema.register('my-widget', {
inheritAllFrom: '$root',
allowWhere: '$block',
isLimit: true,
});
Still, the editor should not crash with an infinite loop, so I reported https://github.com/ckeditor/ckeditor5-engine/issues/1441.

SailsJs Handlebar helper functions does not work

I am using Handlebars as templating engine for Sailsjs. Basic templating is working fine but I can't find out the way to use Handlebars helper function or even built in functions are not available.
I have managed to solve the issue with partials using following article.
https://github.com/balderdashy/sails/issues/2414
I have also registered the helpers.js in config folder but I can't call any custom, built in blocks or iteration helper function.
Any pointers to solve the issue of helpers will be helpful.
Sailsjs verion - 0.11.4
Handlebars version - 4.0.5
I have registered the helper function in above file like this:
Handlebars.registerHelper('help', function() {
return "help22";
});
And I am calling the same in my template:
{{{help}}}
Any idea why it is not rendering?
OK, after few hours trying, I come up with a solution:
You can add this line to the end of config/helpers.js
module.exports = Handlebars.helpers;
Inside view.js:
module.exports.views = {
engine: 'handlebars',
layout: 'layout',
partials: 'partials',
helpers: require('./helpers')
};
It will work.
Above solution didn't work for me - I got error "Handlebars is not defined" because I didn't check this link- https://github.com/balderdashy/sails/issues/2414
I have had to add Handlebars = require('handlebars'); in /config/helpers.js
Putting all together:
Edit file /config/views.js
module.exports.views = {
engine: 'handlebars',
extension: 'html', // optional
layout: 'layouts/main', // optional, will load /views/layouts/main.html
partials: 'partials', // optional, will load partials from /views/partials/
helpers: require('./helpers') // <-- this is it
};
Create file /config/helpers.js
Handlebars = require('handlebars');
module.exports = Handlebars.helpers;
Handlebars.registerHelper('stringify', function(obj) {
var json = {}, prop, tmp;
for (prop in obj) {
if (obj.hasOwnProperty(prop)) {
try {
tmp = JSON.stringify(obj[prop]);
json[prop] = obj[prop];
} catch (e) {
json[prop] = '[CAN NOT stringify]';
}
}
}
return JSON.stringify(json, null, 2);
});
In template I use {{stringify entry}}
Tested on Sails v0.12.13

Dojo provide - update legacy to AMD

This is a followup to this question.
So I have this pre AMD dojo code :
dojo.require(...);
dojo.provide("abc.def.foo");
som.var.iable = {A:1,B:2};
som.var.iable2 = {C: 3, D:som.var.iable.B}
dojo.declare("blah",[],{
//code based on the above variables
});
For AMD, after reading this and the previous link, I am trying something like this
som.var.iable = {A:1,B:2};
som.var.iable2 = {C: 3, D:som.var.iable.B}
define([
"dojo/_base/declare",
], function(declare){
return declare("abc.def.foo", null {
});
});
define([
"dojo/_base/declare",
], function(declare){
som.var.iable = {A:1,B:2};
som.var.iable2 = {C: 3, D:som.var.iable.B}
return declare("blah", null {
//code based on the above variables
});
});
Obviously this fails, as there is no object structure like som.var.iable. I can it, but my question is how did it work in the legacy code? and what would be the correct AMD equivalent?
Any help is greatly appreciated!
OK, here are my assumptions about what you're trying to do:
You don't really need a global variable called some with a property var, that's just a way to organize stuff
You want three modules, some/var/iable, some/var/iable2, and blah. This means three files and three define() calls
Neither som.var.iable nor som.var.iable2 are real inheritable classes, they're just plain old objects... so only blah needs to use declare()
Thus you should create a file som/var/iable.js, which is a provides a plain object:
define([
],
function(){
return {A:1,B,2}
});
And another called som/var/iable2.js, which is a module that provides a plain object:
define([
"som/var/iable",
],
function(iable){
return {C: 3, D:iable.B}
});
And then your third module blah.js that provides a Class-object:
define([
"dojo/_base/declare",
"som/var/iable2"
],
function(declare,iable2){
var parentClasses = [];
var clazz = declare(parentClasses, {
constructor : function(){
// No need for this.inherited(arguments) in this particular case
alert("Welcome to the constructor. Did you know that iable2.D is "+iable2.D+"?");
},
});
return clazz;
});
I haven't tested all this, but to kick it off in a page you'd finally want to put:
require(["blah",dojo/domReady!"], function(blah){
var b = new blah();
});
Dojo should take care of loading everything in-order so that you get an alert that says
Welcome to the constructor. Did you know that iable2.D is 2?

set icon for dijit.MenuItem

We have a case where we only know the icon for a menu item at runtime. I know there is a iconClass parameter for a diji.MenuItem, but this is of little help unless we dynamically add CSS rules at runtime with dojox.html.insertCssRule - there must be a better way!
Here is an example of what we are trying to do:
pMenu = new dijit.Menu({
targetNodeIds: ["NEW_APP"],
leftClickToOpen: true
});
pMenu.popupDelay = 100;
pMenu.addChild(new dijit.PopupMenuItem({
label: "clocks",
iconSrc: "image/clocks.png",
onClick: dojo.hitch(core.editor, core.editor.createNewApp)
}));
Sure, there's a better way although not ideal, something like:
myMenuItem.iconNode.style.cssText =
"background-image: url(...); width: 16px, height: 16px";
The reference to http://robrobbins.info/?p=372 is for an older version of dojo. In the newer syntax, a class can be defined as follows to do the same thing:
define("Foo/FooMenuItem", ['dojo', 'dijit/dijit', "dojo/_base/declare", "dijit/MenuItem"],
function(dojo, dijit, declare, MenuItem) {
return declare("Foo.FooMenuItem", [MenuItem], {
iconSrc: "unknown",
_setIconSrcAttr: {node: "iconNode", type: "attribute", attribute: "src" }
});
});
The simple Foo.FooMenuItem class can then just have the "icon" property set when the class is initialized, and the value set will be inserted in the img src filed for the icon. It can be referenced something like this:
pMenu.addChild(new Foo.FooMenuItem ({
label: "clocks",
iconSrc: "image/clocks.png",
onClick: dojo.hitch(core.editor, core.editor.createNewApp)
}));