define vs csui.define (plus some grunt questions)

HFCDev · April 21, 2020

Hi,

I've observed something with smartUI that seems to have begun around 16.2.10 (because I didn't run into this in CS 16.2.8). If you build the default Hello widget using the generator, in all the JS files, it uses define() to require all of the various artefacts (jquery, Marionette, the HBS template, language etc). However, when I deploy it, I get errors saying that 'define' is undefined. When I replace it with cs.define, it all just works.

Now if I run grunt on the project, I get all kinds of warnings saying that csui.define is, well, not defined. Can anyone help me understand why it is that 'define' in my various smartUI JS files is not recognized, but csui.define is? And if the latter is correct, where do I fix it in the grunt file? I would like to leverage grunt for my smart UI projects as I see the benefit in terms of code quality and build automation.

and BTW, in the grunt task, if you run grunt on your generated app, it always times out when it tries to run Chrome headless. What needs to be in place for this to work? I haven't played around with the testing infrastructure but it occurred to me that this might be why the chrome task is failing.

Thanks in advance

-Hugh

HFCDev · April 28, 2020

I did manage to resolve this. In my Oscript module, my CSUIExtensions was orphaned from CSUI::Extensions::CSUIExtensions instead of from CSUI::Extensions. Once I corrected that and reverted all my csui.define back to define, I was able to compile everything with grunt.

I would still like to know what it is looking for when it goes to run a headless version of Chrome.

-Hugh

Reiner Merz · September 10, 2020

Simply add another grunt task which is not starting tests.
The default grunt task is somewhat not so intelligent by using "subgrunt:compile" and "subgrunt:specs", because its too timeconsuming to do tests every time.
I have introduced a couple of other grunt tasks also playing with "closure" as an alternative to "uglify2" and added a time display to see, when my last run was. My default task consists only of subgrunt:compilerelease and this doesnt generate .map files. Tests are done with separate tasks.
Simply modify the gruntfile.js on project level and for the parameter tune up the gruntfile on src level.
You will run in this topic of modifing the gruntfile.js soon after starting to include other than csui - Modules in your widget

Greetings
Reiner

Ferdinand Prantl · September 10, 2020

define vs. csui.define

When you write source code, you use `define`. Each module resides in its own file. The relative file path to the `src` directory decides the module name. For example:

src/controls/tree/tree.view.js:

<div>define(function () {
  return function TreeView () {}
})</div>

When you build the project, the optimizer (`r.js`) will give a name to each module and namespace the module declaration with `csui`. For example:

out-release/bundles/myext-all.js:

<div>csui.define('myext/controls/tree/tree.view', function () {
  return function TreeView () {}
})</div>

Smart UI pages load the built bundles by `csui.require`, for example:

<div><script src=.../widgets?crossOrigin=true&version=2></script>
<script>
  csui.require([...], function (...) { ... })
</script></div>

Development pages do the same, but load the module sources from the project directory, for example:

<div><script src=../../../../lib/src/csui/require.js></script>
<script src=../../../../lib/src/csui/config.js
        data-csui-path=../../../../lib/src/csui></script>
<script>
  csui.require([...], function (...) { ... })
</script></div>

Except for `csui.require`, `require` is defined on development pages too and both point to the same function.

CSUI::Extension vs. CSUI::CSUIExtension

`CSUI::Extension` is the object to orphan, when registering a new Smart UI extension in a CS module. `CSUI::CSUIExtension` is the registration of the `csui` module itself. Technically , orphaning any object is possible, but you will get functionality that will likely conflict with yours, if you orphan an object with different meaning.

`CSUI::CSUIExtension` will move to `CSUI::Extension::CSUIExtension` in the next version, which will hopefully make the wrong orphaning less likely.

Hanging Chrome

You need to install a recent version of Chrome to get the unit tests running. You can try running `grunt karma:debug --debug --verbose` in the `test` directory to get more information on the console. You could try upgrading your development environment defined in `package.json`. These are NPM module versions related to unit tests used in our recent development:

<div>"grunt-karma": "4.0.0",
"jasmine-core": "2.9.1",
"karma": "5.1.1",
"karma-brief-reporter": "0.2.1",
"karma-chrome-launcher": "3.1.0",
"karma-firefox-launcher": "1.3.0",
"karma-jasmine": "1.1.2",
"karma-requirejs": "1.1.0",
"karma-safari-launcher": "1.0.0",
"requirejs": "2.3.6",</div>

define vs csui.define (plus some grunt questions)

Comments

define vs. csui.define

CSUI::Extension vs. CSUI::CSUIExtension

Hanging Chrome

Categories