We Keep Coding

how do i create require function on external json file for web app final build on Vue js?

i'm building a quiz web-app that only serve locally on the machine. All logic & architecture are now done. But the only problem left is:how do i make the question list from "questionOptions.js" to be external on production version?
So that i can change the list with out the need to export another build version?
currently, the list is being pull from locally in development mode, and i dont have any idea to load list to be dynamic(which can be edit on final build).
Vue js
var looper = new Vue({
el: "#quiz",
data: {
questionList: require("./js/questionsOptions"),
currentQuestion: 0,
...
}
});
questionOptions.js
module.exports = [
{
title: "Soalan 1",
questionTitle: 'Ini adalah penyata soalan 1',
correctAnswer: true,
answerSelection: [
{
name: "Answer 1 A",
score: true
},
{
name: "Answer 1 B",
score: false
},
]
},
{
title: "Soalan 2",
questionTitle: 'Ini adalah penyata soalan 2',
correctAnswer: true,
answerSelection: [
{
name: "Answer 2 A",
score: true
},
{
name: "Answer 2 B",
score: false
}
]
}
]
i might want to change the list content or length in the future, just the question list only on final build. how can i achieve this?

require() is synchronous and executes at build time.
To perform an async request at runtime, you can use import(). Keep in mind, your app will need to be able to handle the asynchronous loading.
For example
data: {
questionList: [],
currentQuestion: 0,
},
async created () {
this.questionList = await import(
/* webpackChunkName: "questionOptions" */
'./js/questionsOptions'
)
}

Protractor- How can I start the test on multiple browsers and then continue only one of the browsers

I start my automation test on three browsers but after that i want to continue on only one browser. Is it possible?
// spec.js
multiCapabilities:[{
'browserName': 'MicrosoftEdge',
},
{
'browserName' : 'chrome',
},
{
'browserName' : 'firefox',
}],
describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.driver.get('http://preg.fxgm.com/aserving/4/1/blg/1/s/LOC-5675/index.html');
browser.ignoreSynchronization = true;
browser.sleep(5000);
browser.driver.findElement(protractor.By.id('submit_button')).click();
browser.sleep(2500);
I would like to continue only with Chrome browser.

You want to create a config file and split out multiCapabilities into that, out of spec.js which should just contain your specs.
For example, create conf.js and add:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
multiCapabilities: [{
browserName : 'MicrosoftEdge',
},{
browserName : 'chrome',
specs: 'spec.js',
},
{
browserName : 'firefox',
}]
};
Then specify conf.js when you run protractor:
> protractor conf
Unless you give firefox and edge something to do, (i.e. add specs parameters to the relevant sections), they will complain that no specs were found but they will still run.

This is the Completed answer , I further elaborated M Hudson's original answer to make it up to date and with current latest protractor version and error free . This config.js is tested and verified . Open the cmd where config.js exists and run protractor configfilename.js
exports.config = {
framework: 'jasmine',
directConnect: false,
multiCapabilities: [{
browserName: 'firefox',
'moz:firefoxOptions': {
args: ['--verbose'],
binary: 'C:/Program Files/Mozilla Firefox/firefox.exe'
//Need to start cmd via admin mode to avoid permission error
},
specs: ['src/com/sam/scriptjs/draganddrop.spec.js']
},
{
browserName : 'chrome',
chromeOptions: {
args: [ "--start-maximized" ]
},
specs: ['src/com/sam/scriptjs/iframes.spec.js']
}],
seleniumAddress: 'http://localhost:4444/wd/hub'
}

Dojo custom build with gridx - Still files are downloaded when page loaded?

We are using dojo in our product extensively and recently all pages with Enhanced grid were updated to gridx and its working fine.
We had compressed gridx files into dojo through Dojo custom build without errors ( i have included all these js files into profile.js file and gridx folder is at the same level where dojo,dijit,dojox are there),i still see my pages requesting few gridx/modules files when page is loaded.
Can someone tell how to avoid downloading these files.
This is profile.js used,its trimmed down to show only gridx related files.
var profile = (function() {
return {
basePath: "./",
releaseDir: "blinkx",
releaseName: "dojo_lib22",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "warn",
selectorEngine: "lite",
resourceTags: {
amd: function(filename, mid) {
return false;
}
},
packages: [{
name: "dojo",
location: "dojo"
}, {
name: "dijit",
location: "dijit"
}, {
name: "dojox",
location: "dojox"
}, {
name: "gridx",
location: 'gridx'
}],
layers: {
"dojo": {
include: ["gridx/nls/gridx",
"gridx/modules/extendedSelect/Column",
"gridx/modules/extendedSelect/Cell",
"gridx/modules/extendedSelect/_RowCellBase",
"gridx/modules/extendedSelect/_Base",
"gridx/modules/AutoScroll",
"gridx/modules/select/Row",
"gridx/modules/CellWidget",
"gridx/modules/NavigableCell",
"gridx/modules/Edit",
"gridx/core/model/extensions/Modify",
"gridx/core/model/extensions/Mark",
"gridx/modules/HiddenColumns",
"gridx/modules/RowLock",
"gridx/core/model/cache/Async",
"gridx/core/model/cache/Sync",
"gridx/core/model/_Extension",
"gridx/core/model/Model",
"gridx/core/Row",
"gridx/core/Column",
"gridx/core/Cell",
"gridx/core/_Module",
"gridx/core/model/extensions/Query",
"gridx/modules/Header",
"gridx/modules/View",
"gridx/modules/Body",
"gridx/support/query",
"gridx/modules/VLayout",
"gridx/modules/HLayout",
"gridx/modules/VScroller",
"gridx/modules/HScroller",
"gridx/modules/ColumnWidth",
"gridx/modules/Focus",
"gridx/modules/Pagination",
"gridx/modules/pagination/PaginationBar",
"gridx/support/Summary",
"gridx/modules/Bar",
"gridx/support/LinkPager",
"gridx/support/LinkSizer",
"gridx/support/GotoPageButton",
"gridx/support/GotoPagePane",
"gridx/modules/SingleSort",
"gridx/core/model/extensions/Sort",
"gridx/modules/Filter",
"gridx/core/model/extensions/ClientFilter",
"gridx/modules/filter/FilterBar",
"gridx/modules/filter/FilterDialog",
"gridx/modules/filter/FilterPane",
"gridx/modules/filter/DistinctComboBoxMenu",
"gridx/modules/filter/FilterConfirmDialog",
"gridx/modules/filter/FilterTooltip",
"gridx/modules/filter/QuickFilter",
"gridx/support/QuickFilter",
"gridx/modules/Puller",
"gridx/modules/VirtualVScroller",
"gridx/modules/Menu",
"gridx/modules/ColumnResizer",
"dijit/form/FilteringSelect",
"gridx/modules/RowHeader"
],
customBase: true,
boot: true
}
}
};
})();

How to exclude files from Dojo's Build System?

I'm following the official documentation page about the topic but I cannot configure it to ignore .txt files.
I have a all.profile.js on the root of my project:
var profile = (function(){
return {
basePath: "./",
releaseDir: "../web",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{ name: "myapp", location: "myapp" }
]
};
})();
And this is the package.json inside the folder myapp:
{
"dojoBuild": "myapp.profile.js",
"name": "my-app",
"description": "This is My App",
"version": "1.0",
"main": "src"
}
And this is the myapp.profile.js also inside the folder myapp:
var profile = (function(){
return {
// don't need to do anything on the 'test' folder so don't define it on the trees.
trees: [
["libs","libs",/txt$/], // ignore .txt files -> DOESN'T WORK!
["src","src",/txt$/] // ignore .txt files -> DOESN'T WORK!
],
resourceTags: {
test: function(filename, mid){
console.log("[test] filename: ",filename);
return filename.indexOf("test/") !== -1;
},
copyOnly: function(filename, mid){
//console.log("[copyOnly] mid: ",mid);
return false;
},
miniExclude: function (filename, mid) {
console.log("[miniExclude] filename: ",filename);
return mid in {
'myapp/myapp.profile': 1,
'myapp/package.json': 2
} || mid.indexOf(".txt") !== -1; // .txt are not ignored so exclude them...
},
amd: function(filename, mid) {
//console.log("[amd] mid: ",mid);
// myapp is not AMD but this will 'convert' it
return false;
}
}
};
})();
Finally, this is the folder structure:
web_dev/
-- myapp/
---- libs/
---- src/
---- test/
---- myapp.profile.js
---- package.json
-- all.profile.js
The build tool runs fine, it reads and process all files but the .txt files are still on the release dir.
Please let me know if you spot any mistakes on my logic or how I'm configuring the build system. I'm using Dojo 1.9.1.
Thanks in advance.

I'm not sure what is wrong with my initial scenario but here are the changes that I made to have the desired result:
Move the trees declaration from the myapp.profile.js to
all.profile.js inside the 'myapp' package definition.
Instead of specifying the root of the trees, check
everything and exclude accordingly: [".", ".",
/(\/\.)|(~$)|(test|txt)/]
The final all.profile.js:
var profile = {
basePath: "./",
releaseDir: "../web",
releaseName: "built",
action: "release",
layerOptimize: "closure",
optimize: "closure",
cssOptimize: "comments",
mini: true,
stripConsole: "all",
packages: [
{
name: "myapp",
location: "myapp",
trees: [
// don't bother with .hidden, tests and txt.
[".", ".", /(\/\.)|(~$)|(test|txt)/]
]
}
]
};
If anyone can pin point exactly what I was doing wrong, please share.

are there any bugs about 'dust js recursion'?

Dust js web gives us some examples. One of them is recursion.
When I change the 'name' of the json in the 3rd section and the 'name' in 1st section to other string like 'node', the output is wrong! What am I doing wrong?
Code:
{node}{~n}{#kids}{>recursion:./}{/kids}
{
"node": "1",
"kids": [{
"node": "1.1",
"kids": [{
"node": "1.1.1"
}]
}]
}

It doesn't work because "recursion" is a template loaded in the dust context.
In dust you can load other templates by name: So when he writes this:
{>recursion:./}
He is loading a template called recursion. you can find it in the examples files.
this is the recursion template:
{
name: "recursion",
source: "{name}{~n}{#kids}{>recursion:./}{/kids}",
context: {
name: '1',
kids: [
{
name: '1.1',
kids: [
{name: '1.1.1'}
]
}
]
},
expected: "1\n1.1\n1.1.1\n"
}
You should create another template with the node fields, load it in the dust context and then just use it.