Migrating from old steal

StealJS
1

Hi!

I have some small Canjs projects using old Steal.
I want to switch to new Steal now (and ultimately to the DoneJS envireonment).

Before I bother you with detailed questions, I have some general ones:

  1. Are there any migration tips other than this:
    http://stealjs.com/docs/StealJS.migrating.html

I have problems to load the modules or files in the old places.

  1. Is it to early to switch to DoneJS?
    I have tested one demo install donejs-chat.
    But what is the best way to migrate my old projects?

Thank you!

Jochum.

2

I try to migrate an old CanJS/Steal project to use the new steal.
This was my old folder structure:

mainfolder
–modulefolder
–oldcan
–oldsteal
–appfolder
----myapp.html
----myapp.js

I installed steal and jquery with npm in this structure.

mainfolder
–modulefolder
–node_modules
–oldcan
–appfolder
----myapp.html
----myapp.js
----stealconfig.js
----package.json

I tried different settings in package.json and stealconfig.js and without any at all. But it did not work out.
What are the settings I have to use in stealconfig.js oder package.json in order to be able to load my old canjs-stuff and the old modules?

In order to reduce everything to the basics I made another test app with the following structure.

appfolder
–node_modules
–myapp.html
–myapp.js
–stealconfig.js

myapp.js ->
steal(‘jquery’
, function($){

            $('#test').html("Hello there!");

});

stealconfig.js is loaded.
But no matter what I do (with “map” and “path”) steal always tries to load jquery from:
appfolder/jquery/jquery.js

I feel that I am on the wrong track here somewhere.
Do you have any idea where I might getting wrong?

The code works if I write this in myapp.js:
import $ from “jquery”;
$(’#eingabe’).html(“das ist gut”);

So it must be something missing to load dependencies the old steal way, right?

Jochum.

3

What does your stealconfig.js look like? Upgrading shouldn’t be too hard. The hardest part is if you are using a lot of .thens.

4

I made a very simple setup. So to test first. So there are no .thens or anything strange…

With this import:
import $ from “jquery”;
$(’#test’).html(“that’s great!”);

the stealconfig works like this:
steal.config({
paths: {
“jquery”: “…/can/lib/jquery-1.11.2.min.js”
}
})
or like this:

steal.config({
paths: {
“jquery”: “node_modules/jquery/dist/jquery.js”
}
})

But if I try to steal like this:
steal(‘jquery’
, function($){
$(’#test’).html(“that’s great!”);
});

it does not work.
steal tries to load jquery from:
appfolder/jquery/jquery.js

5

You also want to add a map for jquery like:

steal.config({
  map: {
    "jquery/jquery": "jquery"
  },
  paths: {
    "jquery": "node_modules/jquery/dist/jquery.js"
  }
})

If you switch to another format like CommonJS you wouldn’t need this map, it’s only needed for when you do: steal('jquery', ...)

6

Thank you!
I did try several map and paths variations. But I must have combined them wrongly.

It loads jquery now in my small test. But if I try to apply it to my old project, I still get a strange behavior:
A dozen of js-files are loaded. It guess nothing is missing.
However, no js is executed? I get no error in the console (and also no steal.dev.log’s).

I tried so many different settings or setups. To be honest I am a bit at a loss where to start really…

7

Your old project might have something like:

steal.config({
  map: {
    "*": {
      "something.js": "something/something.js"
    }
  }
});

Get rid of the * (flatten this config) and also get rid of the .js on both sides. Same for paths, except leave the .js on the right side in that case.

Otherwise can’t help without more specific details. If this is a project for your company know that we do consulting, so you might be able to hire us to help you upgrade if that’s needed.