stealjs / steal-cordova

In production mode.

For the default target there is no update needed to get steal-cordova working. I just tried with myhub app and the following build script:

var path = require("path");
var slim = require("steal-tools/lib/build/slim");

var stealCordova = require("steal-cordova")({
	buildDir: "./build/cordova",
	id: "com.myhub",
	name: "MyHub",
	platforms: ["ios"],
	index: path.join(__dirname, "index.html"),
  files: []
});

var buildPromise = slim({
  main: "myhub",
  config: path.join(__dirname, "package.json!npm")
}, {
  minify: false
});

buildPromise
  .then(stealCordova.build)
  .then(function() {
    stealCordova.ios.emulate();
  })
  .catch(function(err) {
    console.log("Uh-oh! something went wrong: ", err);
  });

apart from some style issue, the app works fine in the ios simulator

There is an issue with multiple targets though, first, the buildResult is an object where each key is the target name and its value is the actual buildResult of said target.

The first change required would be to update the build script so the web buildResult is passed to stealCordoba.build, like this:

buildPromise
  .then(function(result) {
    return stealCordova.build(result.web);
  })
  .then(function() {
    stealCordova.ios.emulate();
  })
  .catch(function(err) {
    console.log("Uh-oh! something went wrong: ", err);
  });

then, the app works just fine. The only issue I see is that steal-cordova is going to copy the whole dist folder which also includes the output of other targets.

@matthewp

a) should we change steal-cordova somehow so it only copies dist/web?
b) Also, since there is no major change needed to get cordova builds working I guess we should document how to do it, maybe expand the current slim guide with the steps I followed?

What about the HTML it copies over? Does it not have a script tag for steal.production.js

it copies the file as is, since the slim loader does not need the steal tag it just works.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./dist/web/bundles/myhub/myhub.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">Hello World.</div>
    <script async src="./dist/bundles/web/myhub/puppies/puppies.js"></script>
    <script async src="./dist/bundles/web/myhub/myhub.js"></script>
    <script async src="./dist/bundles/web/myhub/weather/weather.js"></script>
  </body>
</html>

that's the index.html page of myhub with multiple targets.

steal-cordova/lib/steal-cordova.js

Lines 110 to 115 in 6672d82

    
           if(stealScript) { 
        
           	stealScript.attr("env", "cordova-production"); 
        
           	return writeFile(indexDest, $.html(), "utf8") 
        
           } else { 
        
           	return copy(index, indexDest); 
        
           }

@m-mujica How did the index.html get like that, though? It's from editing it manually, per the guide, right?

Think about it in a donejs context. DoneJS creates a production.html file. This is the file that is copied, along with the build artifacts by steal-cordova. It's the one that is updated to include the env in that code you posted.

@matthewp yep, that's the index.html file that I had to write...

well, if donejs integrates with the slim loader it's production.html would have to load the main bundle instead of using the steal.production.js script and when you passed the options to steal-cordova you provide the path to that index.html

var stealCordova = require("steal-cordova")({
	buildDir: "./build/cordova",
	id: "com.myhub",
	name: "MyHub",
	platforms: ["ios"],
	index: path.join(__dirname, "index.html"),    <=====
  files: []
});

what am I missing?

@m-mujica can this be closed?

	if(stealScript) {
	stealScript.attr("env", "cordova-production");
	return writeFile(indexDest, $.html(), "utf8")
	} else {
	return copy(index, indexDest);
	}

Update so that it can use the slim loader