We Keep Coding

How to inciude a local html file in a webview in nativescript main-page.js?

Is it possible to add a local html file in the nativescript webview ?
If yes How can I do it using javascript ?
When I add online page it works , I can add www.google.com in the webview it works .But I want to add a local page but I don't find a way to do this .

Yes, it's possible. You need to consider that all NativeScript apps are build by default with Webpack and the default webpack.config.js will take care of certain files (like the ones in a fonts folder or like all images with *.png and *..jpg extensions). The webpack build will bundle all JavaScript files and in the case of the Angular flavor will also cognitively include the Angular related HTML files. However, the default webpack.config.js won't "know" about your custom HTML file.
The solution is to let Webpack know that it should copy the specific HTML file. This should be done via the CopyWebpackPlugin section in webpack.config.js file.
Example (assuming we have a file called test.html in the app directory)
new CopyWebpackPlugin([
{ from: { glob: "test.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
For real-life example see this config where this HTML file is the one we are targeting.

kotlin-js gradle outputfile wrong

I'm working on kotlin-js example. I used this sample. When I was build frontend module(as shown in the picture below) I can't see web folder. But the resource files should be in web folder. What's wrong?
Project Source Image
buildscript {
ext.kotlin_version = '1.2.30'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
group 'example'
version '1.0-SNAPSHOT'
apply plugin: 'kotlin2js'
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
}
build.doLast {
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
}
compileKotlin2Js {
kotlinOptions.outputFile = "${projectDir}/web/output.js"
kotlinOptions.sourceMap = true
}

Your copy { ... } block only sets up copying of the dependency files from the compile configuration, and it does not copy the resources of your project into web. Neither does the compileKotlin2Js task, which only puts the compiled Kotlin classes into that directory.
To copy the resources of the main source set, you can add another copy { ... } block, like this:
build.doLast {
// ...
copy {
from sourceSets.main.output.resourcesDir
into "${projectDir}/web"
}
}
And note that if you only copy the files, you may end up with stale output files left from the previous run (if a file no more exists in the source directory, its copy is not deleted from the target). Instead, consider using the default output file location for the compileKotlin2Js task and a Sync task to synchronize the directories, as described in this guide (it does not mention the resources; add them with from ... as suggested above). If you need to customize the output file name, you can use archivesBaseName for that.

Webpack compile all files in a folder

So I'm using Laravel 5.4 and I use webpack to compile multiple .js files in 1 big js file.
const { mix } = require('laravel-mix');
// Compile all CSS file from the theme
mix.styles([
'resources/assets/theme/css/bootstrap.min.css',
'resources/assets/theme/css/main.css',
'resources/assets/theme/css/plugins.css',
'resources/assets/theme/css/themes.css',
'resources/assets/theme/css/themes/emerald.css',
'resources/assets/theme/css/font-awesome.min.css',
], 'public/css/theme.css');
// Compile all JS file from the theme
mix.scripts([
'resources/assets/theme/js/bootstrap.min.js',
'resources/assets/theme/js/app.js',
'resources/assets/theme/js/modernizr.js',
'resources/assets/theme/js/plugins.js',
], 'public/js/theme.js');
This is my webpack.mix.js to do it (same for css). But I want to get something like: resources/assets/theme/js/* to get all files from a folder. So when I make a new js file in the folder that webpack automatically finds it, and compile it when I run the command.
Does someone know how to this?
Thanks for helping.

If anyone wants the code to compile all sass/less/js files in a directory to a different directory with the same filename you can use this:
// webpack.mix.js
let fs = require('fs');
let getFiles = function (dir) {
// get all 'files' in this directory
// filter directories
return fs.readdirSync(dir).filter(file => {
return fs.statSync(`${dir}/${file}`).isFile();
});
};
getFiles('directory').forEach(function (filepath) {
mix.js('directory/' + filepath, 'js');
});

Wildcards are actually allowed using the mix.scripts() method, as confirmed by the creator in this issue. So your call should look like this:
mix.scripts(
'resources/assets/theme/js/*.js',
'public/js/theme.js');
I presume it works the same for styles, since they use the same method to combine the files.
Hope this helps you.

Combine two Javascript directories into two single, separate files

The project I'm working on is using combineJS from this gradle plugin in its gradle build. What it does is combine the contents of a directory, in this case topsoil_js, into a single javascript file. I would like to do the same, but with the contents of a different directory, plots_js, into a different single file.
The current code looks like this:
javascript.source {
topsoil {
js {
srcDir 'src/main/resources/org/cirdles/topsoil/plot/topsoil_js'
include '*.js'
}
}
plots {
js {
srcDir 'src/main/resources/org/cirdles/topsoil/plot/plots_js'
include '*js'
}
}
}
combineJs {
source = javascript.source.topsoil.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/topsoil.js")
}
I've tried adding an identical combineJs statement to combine plots_js, like so:
combineJs {
source = javascript.source.plots.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/plots.js")
}
The problem is that source and dest get overwritten, so only the last combineJs you call actually combines a file. I'm relatively new to gradle, so I'm not actually sure how the rest of the project consumes these variables. Are they keywords that gradle knows to look for, or are they arbitrary?
Most importantly: does anyone have suggestions on how to combine both sets of files?
EDIT: I also tried following the instructions in this documentation for the plugin, which tells me to format it like so:
task combineTopsoilJs(type: com.eriwen.gradle.js.tasks.CombineJsTask) {
source = javascript.source.topsoil.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/topsoil.js")
}
task combinePlotJs(type: com.eriwen.gradle.js.tasks.CombineJsTask) {
source = javascript.source.plots.js.files
dest = file("${project.buildDir}/resources/main/org/cirdles/topsoil/plot/BasicPlot.js")
}
But this format isn't working either, just throwing an error I'm having trouble tracking down.

Define a Gradle task with inputs from project dependencies?

Background: I have a multi-project Gradle build, and I've defined a Gradle task which runs JavaScript unit tests in an Exec task. The inputs to this task are the JavaScript files in the project, so it's only re-run if one of the source files are modified. The task is added to all JavaScript projects from a master project.
Question: I want to extend this so that the tests are re-run if JavaScript files in the project, or in any of its project dependencies are changed. How is this best done?
The code below works if placed in each subproject build file (after the dependency declaration), but we have 20+ JavaScript subprojects and I'd like to stay DRY.
project.ext.jsSourceFiles = fileTree("src/").include("**/*.js*")
task testJavaScript(type: Exec, dependsOn: configurations.js) {
inputs.files resolveJavascriptDependenciesFor(project)
outputs.file "report.xml"
// Run tests in JSTestDriver using command line call...
}
def resolveJavascriptDependenciesFor(project) {
def files = project.jsSourceFiles
project.configurations.js.allDependencies.each {
files = files + resolveJavascriptDependenciesFor(it.dependencyProject)
}
return files
}
Is there a better solution? Maybe where I don't have to resolve all file dependencies myself?

As written in the answer before, adding the jsTest task within a subprojects closure would make it very easy to add jstesting support for every subproject. I think you can ease your inputs setup by declaring source files as dependencies:
dependencies {
js filetree("src/main").include("**/*.js")
}
and
subprojects { subproj ->
task testJavaScript(type: Exec, dependsOn: configurations.js) {
inputs.files subproj.configurations.js
outputs.file "report.xml"
commandLine ...
}
}

Would it be possible to do something like this?
allprojects {project ->
task testJavaScript(type: Exec, dependsOn: configurations.js) {
inputs.files resolveJavascriptDependenciesFor(project)
// Run tests in JSTestDriver using command line call...
}
}
def resolveJavascriptDependenciesFor(project) {
def files = project.jsSourceFiles
project.configurations.js.allDependencies.each {
files = files + resolveJavascriptDependenciesFor(it.dependencyProject)
}
return files
}
Tha way the task is on all projects, and wil be called recursively.
Not completely sure this works, but I think its the way to go

I've found a solution that works but isn't great, using the same dependency specification as in the question. It's to load the gradle files in a slightly different order in the master project.
Master build.gradle:
subprojects {
configurations {
js
}
// Apply the subproject's build.gradle, but with another name (that isn't automatically loaded)
if (project.file('depends.gradle').exists()) {
apply from: project.file('depends.gradle')
}
apply from: project.parent.file('javaScriptProjectTasks.gradle')
}
Compare to the previous, non working master build.gradle
subprojects {
configurations {
js
}
apply from: project.parent.file('javaScriptProjectTasks.gradle')
// The subproject's build.gradle is automatically loaded
}