GithubHelp home page GithubHelp logo

esri / ember-cli-amd Goto Github PK

View Code? Open in Web Editor NEW
21.0 13.0 15.0 3.66 MB

Ember CLI Addon for using AMD libraries

License: Apache License 2.0

JavaScript 91.80% HTML 8.05% Handlebars 0.15%
web-development ember-cli javascript

ember-cli-amd's Introduction

ember-cli-amd

If your project needs to use an AMD based library, the Ember loader will conflict with the AMD loader.

The issue is that the Ember Loader defines the same globals require and define but are not AMD compatible.

The solution is to make the Ember Loader not conflicting anymore with the AMD Loader and to load the Ember App as an AMD module.

This addon will:

  • Allow you to import AMD modules from you Ember code. Example: import Map from 'esri/Map';
  • Update the code generated by Ember to avoid conflicts with the AMD loader
  • Update the index.html to use the AMD Loader:
    • load any pure AMD modules found in the code first using the AMD loader.
    • load the Ember code as AMD modules (app and vendor)
    • reference the AMD modules inside the Ember loader

View it live using the ArcGIS API for JavaScript.

Usage

ember install ember-cli-amd

Update your ember-cli-build file. See configuration below as an example:

var app = new EmberApp({
  amd : {
    // Specify the loader path. Can be a CDN path or a relative path in the dist folder
    // - CDN: loader: 'https://js.arcgis.com/4.14/'
    // - Local: loader: 'assets/jsapi/init.js'
    loader: 'https://js.arcgis.com/4.16/',
    
    // AMD packages from which modules are imported from in your application.
    // Used to parse the import statements and discover the AMD modules from the other modules.
    packages: ['esri','dojo'],
    
    // Optional: a list of relative paths from the build directory that should not be parsed by ember-cli-amd.
    // This is useful for:
    // - when using an AMD api locally and copied under public folder. The files will be copied under the build folder. These files are pure AMD
    //   modules and should not be converted.
    // - when copying from public to build directory files that are pure JS or pure AMD
    excludePaths: ['assets/jsapi', 'assets/myLibThatDontUseEmberDefineOrRequire'],

    // Optional: the path to javascript file that will be created for loading the AMD modules
    // default: assets
    loadingFilePath: 'assets',

    // Optional: Indicates if we should inject scripts directly into index.html, or if we should
    // write them to separate js files that are loaded by index.html.  When strict fingerprinting
    // is required, this should be set to true, since there are scenarios where the generated 
    // amd-loading.js script will not get a unique fingerprint.
    // default: false
    inline: false,
  }
});

Example using the CDN resources

Your ember-cli-build.js:

module.exports = function(defaults) {

  var app = new EmberApp(defaults, {
    amd :{
      loader: 'https://js.arcgis.com/4.16/',
      packages: ['esri','dojo'],
      excludePaths: ['assets/workers']
    }
  });

  return app.toTree();
};

Your component:

import Component from '@glimmer/component';
import Map from 'esri/Map';

class MapComponent extends Component {
  // Do something with Map: const map = new Map({});
}

Your original index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  {{content-for "head"}}
  <link rel="stylesheet" href="assets/vendor.css">
  <link rel="stylesheet" href="assets/myapp.css">
  {{content-for "head-footer"}}

</head>

<body>

  {{content-for "body"}}
  <script src="assets/vendor.js"></script>
  <script src="assets/myapp.js"></script>
  {{content-for "body-footer"}}
</body>

</html>

The results will be:

  • a transformed index.html in your dist directory
  • an additional script file will be created under the dist directory under assets/amd-loading.js

dist/index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My App</title>
  <meta name="description" content>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="assets/vendor.css">
  <link rel="stylesheet" href="assets/myapp.css">
</head>

<body>
  <script src="https://jsdev.arcgis.com/4.15/init.js" data-amd="true"></script>
  <script src="assets/amd-loading.js" data-amd-loading="true"></script>
</body>

</html>

dist/assets/amd-loading.js

require([
  'esri/Map'
], function(mod0) {
  var adoptables = [{
    name: 'esri/Map',
    obj: mod0
  }];
  var isVendor = new RegExp('vendor(.*js)');

  function recursiveRequire(i, scripts) {
    if (i >= scripts.length) {
      return;
    }
    require([scripts[i]], function() {
      if (isVendor.test(scripts[i])) {
        adoptables.forEach(function(adoptable) {
          enifed(adoptable.name, [], function() {
            return adoptable.obj;
          });
        });
      }
      recursiveRequire(++i, scripts);
    });
  }
  recursiveRequire(0, ["assets/vendor.js", "assets/nickel.js"]);
});

Breaking changes

The version 3.x introduce the following breaking changes:

  • No more configPath. Use other addons to load the scripts you need in your header
  • The AMD module loading will be done in a separate javascript file. This is to keep the index.html as small as possible and optimized for caching
  • The loading script will be fingerprinted if you have turned on this feature in your build

Dependencies

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file

ember-cli-amd's People

Contributors

4e4c52 avatar bsvensson avatar dbouwman avatar dependabot[bot] avatar ember-tomster avatar ffaubry avatar jrowlingson avatar kategengler avatar keithclinard avatar odoe avatar timmorey avatar tomwayson avatar zachnthebox avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ember-cli-amd's Issues

dojo.equireray is not a function

I'm getting this error when I include ember-cli-amd for a project that uses a arcgis map module.
Any thoughts on how to get this to work?

Brocfile.js:

var app = new EmberApp({
  srcTag: 'http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5',
  useRequire: false,
  useDojo: false,
  amdPackages: [
    'esri','dojo','dojox','dijit',
    'put-selector','xstyle','dgrid'
  ],
});
<script type="text/javascript"> var djConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>

Then later:

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.symbols.SimpleMarkerSymbol")
dojo.require("esri.geometry.Point")

Failing to load require.js

I'm failing to load AMD modules with require.js using ember-cli-amd. I'm getting the following error message no matter what I do:

ember-cli-amd/node_modules/requirejs/bin/r.js:27079
                config.logLevel = config.hasOwnProperty('logLevel') ?

This is obviously suggesting that the configuration global is not there when needed, but I'm not sure why that is?

The require.js configuration file referred to in ember-cli-build.js is as follows (this is what I gleaned from require.js configuration is the way to refer to it):

var require = {
  baseUrl: 'js',
  paths: {
    text: 'lib/text'
  },
  shim: {

    'lib/jquery.min':
        { exports:'jQuery' },

    'lib/jquery.center':
        { deps:
            [ 'lib/jquery.min' ] },
...
}

This is how my ember-cli-build.js looks like:

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    amd: {
      loader:"requirejs",
      packages:[], // nothing here yet before i get the build going.
      configPath:'manuscripts-js/app/js/main.js',
      libraryPath:'bower_components/requirejs',
      outputPath:'vendor/build.js',
      outputDependencyList: true,
      inline:false // I've also tried inline = true here
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

after change to new version 2.0 generated index file contains no amd packages any more

I am using an external requirejs loader and i have configured the following in ember-cli-build.js:
amd : {
loader: 'http://host-url:80/vp-local/resources/assets/external/requirejs/require.js',
packages: ['js/qlik'],
configPath: 'config/requirejs-config.js',
excludePaths: ['']
}
the script within index.html contains no package js/qlik any more:
require([
--> empty
], function() {
var adoptables = [];
var isVendor = new RegExp('vendor(.*js)');

  function recursiveRequire(i, scripts) {
    if (i >= scripts.length) {
      return;
    }
    require([scripts[i]], function() {
      if (isVendor.test(scripts[i])) {
        adoptables.forEach(function(adoptable) {
          enifed(adoptable.name, [], function() {
            return adoptable.obj;
          });
        });
      }
      recursiveRequire(++i, scripts);
    });
  }
  recursiveRequire(0, ["/assets/vendor.js", "/assets/qdt-requirejs.js"]);
});

Typo in 'Example using the CDN resources'

On the README page, there is this sample code:

module.exports = function(defaults) {

  var app = new EmberApp(defaults, {
    amd :{
      loader: 'https://js.arcgis.com/3.15/',
      configPath: 'config/dojo-config.js',
      amdPackages: [
        'esri','dojo','dojox','dijit',
        'put-selector','xstyle','dbind','dgrid'
      ]
    }
  });

The only way I have gotten the addon to work is to change 'amdPackages' to 'packages', like this:

module.exports = function(defaults) {

  var app = new EmberApp(defaults, {
    amd :{
      loader: 'https://js.arcgis.com/3.15/',
      configPath: 'config/dojo-config.js',
      packages: [
        'esri','dojo','dojox','dijit',
        'put-selector','xstyle','dbind','dgrid'
      ]
    }
  });

undefinedModule error from arcgis js library during tests

I am getting an undefinedModule error when running tests in the browser on chrome (visiting /tests) after installing this plugin. The error is being thrown from inside of the arcgis js file.

Uncaught Error: undefinedModule
    at p (:formatted:26)
    at ba (:formatted:228)
    at v (:formatted:33)
    at test-support-suffix.js:7

Being thrown from around here if this helpful:

// All material copyright ESRI, All Rights Reserved, unless otherwise specified.
// See https://js.arcgis.com/4.16/esri/copyright.txt for details.
//>>built
(function(e, b) {
    var a, m = function() {
        return "undefined" !== typeof q && "function" !== typeof q ? q : "undefined" !== typeof window ? window : "undefined" !== typeof self ? self : this
    }(), l = function() {}, k = function(a) {
        for (var c in a)
            return 0;
        return 1
    }, g = {}.toString, f = function(a) {
        return "[object Function]" == g.call(a)
    }, c = function(a) {
        return "[object String]" == g.call(a)
    }, d = function(a) {
        return "[object Array]" == g.call(a)
    }, h = function(a, c) {
        if (a)
            for (var d = 0; d < a.length; )
                c(a[d++])
    }, n = function(a, c) {
        for (var d in c)
            a[d] = c[d];
        return a
    }, p = function(a, c) {
      **// error happens here**
        return n(Error(a), {
            src: "dojoLoader",
            info: c
        })

Ember-try failing with Ember 3.27

Running ember try:one ember-release in the ember-cli-amd project is currently producing many test failures (or otherwise craft and run a scenario that pulls in the 3.27 version of Ember).

If you craft and run a scenario that pulls in the previous 3.26 version of Ember, the tests pass.

It looks like the upcoming 3.27 release of Ember includes some changes to the Ember loader which may be the culprit: emberjs/ember.js#19390.

Test run output
Built project successfully. Stored in "/var/folders/9l/vmkxx6gs34b7tzz97z4msclm0000gn/T/tests-dist-2021427-23240-1v5h9yc.wx24".
not ok 1 Chrome 90.0 - [undefined ms] - Global error: Script error. at , line 0
    ---
        browser log: |
            {"type":"error","text":"Script error. at , line 0\n","testContext":{}}
    ...
not ok 2 Chrome 90.0 - [undefined ms] - Global error: Script error. at , line 0
    ---
        browser log: |
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"[object Object]"}
            {"type":"log","text":"src: dojoLoader"}
            {"type":"log","text":"info: [object Object]"}
            {"type":"log","text":"."}
            {"type":"error","text":"Script error. at , line 0\n","testContext":{"state":"complete"}}
    ...
not ok 3 Chrome 90.0 - [undefined ms] - Global error: Uncaught Error: Could not find module `ember-resolver` imported from `dummy/app` at http://localhost:7357/assets/vendor.js, line 259
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Could not find module `ember-resolver` imported from `dummy/app` at http://localhost:7357/assets/vendor.js, line 259\n","testContext":{"state":"complete"}}
    ...
not ok 4 Chrome 90.0 - [undefined ms] - Global error: Uncaught Error: Could not find module `@ember/test-helpers` imported from `dummy/tests/test-helper` at http://localhost:7357/assets/vendor.js, line 259
    ---
        browser log: |
            {"type":"error","text":"Uncaught Error: Could not find module `@ember/test-helpers` imported from `dummy/tests/test-helper` at http://localhost:7357/assets/vendor.js, line 259\n","testContext":{"state":"complete"}}
    ...
not ok 5 Chrome 90.0 - [undefined ms] - Global error: Uncaught ReferenceError: Ember is not defined at http://localhost:7357/assets/after-amd-loading-tests.js, line 1
    ---
        browser log: |
            {"type":"error","text":"Uncaught ReferenceError: Ember is not defined at http://localhost:7357/assets/after-amd-loading-tests.js, line 1\n","testContext":{"state":"complete"}}
    ...

Support package main shorthand in required module names

I recently was trying to import the main module of my package by specifying just the package name, i.e. import Mapillary from 'Mapillary'; but that didn't work. I ended up having to use import Mapillary from 'Mapillary/mapillary-js.min';

I suspect this line is the culprit, which wants the module name to include a /.

I propose to change that to also check for the entire package name:

return module.indexOf(p + '/') === 0 || module === p;

But I don't know if that will have downstream consequences, so I thought I'd check here before making a PR.

Not playing nicely with Ember Inspector

Using the Ember Inspector browser extension, I'm getting odd-ball requests on the first two loads (i.e. it works the 3rd time the page is loaded) such as:

vendor.js:180 Uncaught Error: Could not find module ember-debug/adapters/chrome imported from (equireray)missingModule @ vendor.js:180findModule @ vendor.js:194requireModule @ vendor.js:184sendVersionMiss @ VM155:7814(anonymous function) @ VM155:7685triggerOnce @ VM155:7733completed @ VM155:7755
init.js:30 GET http://js.arcgis.com/3.15/ember-debug/addons/ember-new-computed/utils/can-use-new-syntax.js r.injectUrl @ init.js:30pa @ init.js:27a @ init.js:5(anonymous function) @ init.js:14ia @ init.js:23ma @ init.js:14Ia @ init.js:31(anonymous function) @ VM155:488(anonymous function) @ VM155:7891
init.js:31 Error: scriptError(โ€ฆ)(anonymous function) @ init.js:31(anonymous function) @ init.js:9a @ init.js:5r.signal @ init.js:9(anonymous function) @ init.js:30
init.js:31 src: dojoLoader
init.js:31 info: ["http://js.arcgis.com/3.15/ember-debug/addons/ember-new-computed/utils/can-use-new-syntax.js", Event]

Ember-cli 2.5.1
ember-cli-amd 0.4.7

Fingerprinting amd-start.js and amd-config.js for CDN support

Since we deploy the build assets to a cloud-fronted S3 bucket, we need amd-start.js and amd-config.js files to be fingerprinted to effectively bust the caching that is inherent in CDNs.

Another option that would avoid this would be to inline these scripts in the page vs writing out files.

Either way, right now we need to manually delete these files from S3 before we do a deploy, which could incur app downtime.

Broken in ember 2.6.0

$ ember -v
ember-cli: 2.6.0
node: 4.2.2
os: darwin x64
$ ember new test-app
$ ember install ember-cli-amd

...

$ ember s
app-shims.js:7 Uncaught ReferenceError: Ember is not defined
test-amd.js:9 Uncaught TypeError: efineday is not a function

Demo source code

Hello,

Is it possible to have access to the source code of the demo app?
I can't manage to get it to work (using Ember CLI 1.13.8).

Thanks

Test-loader is broken

The replacement of 'require' by 'equireray' in the test-loader when using 'ember test' brake the code.
Test-loader is wrapping the require form the loader. The 'require' in these lines of code should have also been replaced by 'equireray':

   TestLoader.prototype.unsee = function(moduleName) {
     if (typeof require.unsee === 'function') {
       require.unsee(moduleName);
     } else if (!this._didLogMissingUnsee) {
      this._didLogMissingUnsee = true;
      if (typeof console !== 'undefined') {
        console.warn('unable to require.unsee, please upgrade loader.js to >= v3.3.0');
      }
     }
    };

I think the best way to fix this is to pig latin all the 'require' in the test-loader.

'require' and 'define' are being transformed in the public folder

In version, 0.4.9 of the application. The regex that transformed require and define were only applied to the app, tests, and vendor files.

In the newest addon, the public folder is also transformed which breaks applications that self host the esri libraries.

Broken in ember 2.4.1

In ember 2.4.1, the addon works, however, the tests break.

When I do ember test -s, I see:

Global error: Error: Could not find module `ember-cli/test-loader` imported from `(equireray)` at http://localhost:7357/assets/vendor.js, line 173

Global error: Error: Could not find module `ember-qunit` imported from `ember-test-app-2/tests/test-helper` at http://localhost:7357/assets/vendor.js, line 17
3

Error: Could not find module `ember-cli/test-loader` imported from `(equireray)` at http://localhost:7357/assets/vendor.js, line 173
Error: Could not find module `ember-qunit` imported from `ember-test-app-2/tests/test-helper` at http://localhost:7357/assets/vendor.js, line 173

replace-require-and-define mangles MemberExpressions

In several apps, we're using ember-cli-amd to consume the Esri arcgis-js-api. We've recently introduced Stencil components via calcite-components, where there's a known conflict with this repo.

In https://github.com/Esri/ember-esri-loader/, they've worked around this issue by replacing the espree/esrima-walk approach with a regex that explicitly skips customElements.define.

I forked this repo and tried to improve the parser approach, but esprima-walk's walkAddParent method is broken when also using range, and an open PR there doesn't appear to resolve the issue. Further, that repo hasn't been updated in 4 years.

Long story short, it'd be useful if ember-cli-amd could avoid rewriting calls to customElements.define at least, but maybe also *.[require|define].

Project will not build when you change the default root

If you change the default root from '/' to something like '/blog', the build errors out with an error similiar to:

Build Error (ConvertToAMD)

ENOENT: no such file or directory, open '/var/folders/bz/4mcxsd4x0zx8_brqzjpld6dc0000gn/T/broccoli-46016cGA7TN0S72TJ/out-255-convert_to_amd/blog/assets/amd-loading.js'

You can see that /blog has been added to the path where ember-cli is looking for the amd-loading.js

A put together a quick demo app here that won't build due to this issue:
https://github.com/Mciocca/arcgis-bug

This is only an issue when the rootUrl config is changed in config/environment.js

amd-loading.js does not get a unique fingerprint

The amd-loading.js script does not always get a unique fingerprint at build time, which can break deployments to environments that simultaneously host multiple revisions (for example the lightning deploy strategy). In particular, when a revision contains only changes to the app or vendor js files, the amd-loading.js script will not get a unique fingerprint.

This can be reproduced in the dummy app included in this addon:

  1. Build the dummy app for production (ember build -e production). This will produce assets like
 - dist/assets/after-amd-loading-49ba473f2b98921e1454e73bbd5c5309.js: 154 B (91 B gzipped)
 - dist/assets/amd-loading-b1312b7f4f125360ce0fd4cd3a7ccf49.js: 535 B (374 B gzipped)
 - dist/assets/amd-loading-tests-a5bd3d73673838c1fc13645cfdaa7610.js: 367 B (256 B gzipped)
 - dist/assets/dummy-3a7c7f5af0c960f7a683a3f8570faeab.js: 6.86 KB (1.83 KB gzipped)
 - dist/assets/dummy-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - dist/assets/vendor-a222ba9ee1f0c0d773cef70a9339063d.js: 501.41 KB (131.12 KB gzipped)
 - dist/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
  1. Make a change to the dummy app that does not include any new amd imports and will only result in a change to the dummy.js asset. For example, add <div>hello world</div> to the application.hbs template.
  2. Build the dummy app for production again. This time, we get the following assets:
 - dist/assets/after-amd-loading-49ba473f2b98921e1454e73bbd5c5309.js: 154 B (91 B gzipped)
 - dist/assets/amd-loading-b1312b7f4f125360ce0fd4cd3a7ccf49.js: 535 B (373 B gzipped)
 - dist/assets/amd-loading-tests-a5bd3d73673838c1fc13645cfdaa7610.js: 367 B (256 B gzipped)
 - dist/assets/dummy-9cfba068dfb7c1876d95efa82d6a45aa.js: 6.91 KB (1.85 KB gzipped)
 - dist/assets/dummy-d41d8cd98f00b204e9800998ecf8427e.css: 0 B
 - dist/assets/vendor-a222ba9ee1f0c0d773cef70a9339063d.js: 501.41 KB (131.12 KB gzipped)
 - dist/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css: 0 B

Notice that the dummy.js file got a unique fingerprint here, but the amd-loading.js fingerprint is the same as in the previous build, even though the new amd-loading script correctly references the new dummy script.

If we were to then deploy both of these revisions to a hosting environment, both would end up loading the same dummy.js file -- the two revisions will not be able to coexist. Thus the deployment is broken.

The fingerprint of the amd-loading script will only be changed when the amd imports in the app are changed.

I believe this is due to the way fingerprinting is done in ember-cli. Fingerprints are first computed for all assets, and then the asset files are later re-written to preserve references to other fingerprinted assets. So, a new fingerprint on the dummy.js or vendor.js file does not lead to a new fingerprint on the amd-loading.js file.

Our team uses the lightning deploy strategy in our QA environments where we host many revisions at once for different lines of development. We also use this strategy in the production hosting for one of our apps. For the time being, we have reverted to using ember-cli-amd 2.x, since it appears that 3.x is incompatible with the deployment strategy. However, we would like to update to 3.x so we can benefit from other changes happening here.

One solution might be to provide an option to inline amd-loading.js into index.html at build time for use cases that are dependent on unique fingerprints.

Ember Server failing on test-support.js on v1.2.4

On v1.2.3, ember server would successfully complete (though the application wouldn't run).

Now on v1.2.4 ember server errors out with the following message

Build Error (RequireFilter) in assets/test-support.js

Cannot read property 'length' of undefined

ERROR Summary:

  - broccoliBuilderErrorStack: TypeError: Cannot read property 'length' of undefined
    at new Scanner (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:5141:29)
    at new Parser (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:1851:25)
    at parse (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:120:19)
    at Object.parseScript (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:145:13)
    at replaceRequireAndDefine (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:443:23)
    at /home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:499:33
    at walk (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima-walk/esprima-walk.js:12:3)
    at replaceRequireAndDefine (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:451:3)
    at /home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:499:33
    at walk (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima-walk/esprima-walk.js:12:3)
  - codeFrame: Cannot read property 'length' of undefined
  - errorMessage: assets/test-support.js: Cannot read property 'length' of undefined
        in /tmp/broccoli-1643pIf0FdkyAuGn/out-186-append_ember_auto_import_analyzer
        at RequireFilter
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: assets/test-support.js
    - line: [undefined]
    - treeDir: /tmp/broccoli-1643pIf0FdkyAuGn/out-186-append_ember_auto_import_analyzer
  - message: assets/test-support.js: Cannot read property 'length' of undefined
        in /tmp/broccoli-1643pIf0FdkyAuGn/out-186-append_ember_auto_import_analyzer
        at RequireFilter
  - name: BuildError
  - nodeAnnotation: [undefined]
  - nodeName: RequireFilter
  - originalErrorMessage: Cannot read property 'length' of undefined
  - stack: TypeError: Cannot read property 'length' of undefined
    at new Scanner (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:5141:29)
    at new Parser (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:1851:25)
    at parse (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:120:19)
    at Object.parseScript (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima/dist/esprima.js:145:13)
    at replaceRequireAndDefine (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:443:23)
    at /home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:499:33
    at walk (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima-walk/esprima-walk.js:12:3)
    at replaceRequireAndDefine (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:451:3)
    at /home/ggayowsky/Workbench/DIRECT/rspace/node_modules/ember-cli-amd/index.js:499:33
    at walk (/home/ggayowsky/Workbench/DIRECT/rspace/node_modules/esprima-walk/esprima-walk.js:12:3)

=================================================================================

Here is my projects package.json dependencies

"devDependencies": {
"@ember/jquery": "^0.5.2",
"@ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-auto-import": "^1.2.10",
"ember-cli": "~3.7.1",
"ember-cli-amd": "1.2.4",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-cjs-transform": "^1.3.0",
"ember-cli-content-security-policy": "^1.0.0",
"ember-cli-dependency-checker": "^3.0.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sass": "^8.0.1",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^2.1.0",
"ember-component-css": "^0.6.5",
"ember-concurrency": "^0.8.26",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^5.1.3",
"ember-load-initializers": "^1.1.0",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.7.0",
"ember-truth-helpers": "^2.0.0",
"eslint": "^5.7.0",
"eslint-config-semistandard": "^12.0.1",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-ember": "^5.2.0",
"eslint-plugin-header": "^1.2.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.0",
"eslint-plugin-standard": "^3.0.1",
"glob": "^4.5.3",
"http-proxy": "^1.17.0",
"loader.js": "^4.7.0",
"morgan": "^1.9.0",
"sass": "^1.14.3",
"sinon": "^7.0.0"
},
"engines": {
"node": "6.* || 8.* || >= 10.*"
},
"dependencies": {
"d3": "^5.7.0",
"d3-scale-chromatic": "^1.3.3",
"font-awesome": "^4.7.0",
"jquery-ui-dist": "^1.12.1",
"jquery-ui-touch-punch": "^0.2.3",
"moment": "^2.22.2",
"normalize.css": "^3.0.3",
"nouislider": "^11.1.0",
"spin.js": "^3.1.0",
"tinycolor2": "^1.4.1"
}

extract require/define replacement into own package

I'd like to extract the require/define replacement code from this addon into it's own package so that ember-esri-loader can share the logic (or even better so that I can get rid of ember-esri-loader all together and just pull in esri-loader via ember-auto-import).

I read through index.js, and I don't fully grok everything that's going on, but I'm guessing that would involve moving at least RequireFilter and replaceRequireAndDefine() into a new package like broccoli-require-filter. Then this addon and others would do:

const { RequireFilter, replaceRequireAndDefine } = require('broccoli-require-filter');

Does that sound like it would work? Are there other pieces that I'm missing that would also need to be extracted?

Would you be interested in that if I were to create the new package, get it working in ember-esr-loader, and then PR an update here?

Problem while importing ArcGis library from local

Hello,

First of all, nice work! This is going to be very useful for a lot of people!

I'm going to explain the problem that I encountered while using the library.

Actually I'm refactoring a project which uses ArcGis library to show a map with some FeatureLayers, the special thing about this project is that it is using an offline plugin to store map parts (basemap tiles and feature layers) on the browser, to achieve this I'm using: offline-editor-js

So, I need the Esri library available locally to save it with HTML5 Application Cache. With the actual code this is working. Now I'm moving to Ember.js

I've downloaded the latest version of ArcGis library from the official website and looking at your code I've achieved to do a setup, but I'm encountering a problem:

Dojo has.js error (dojo root dir problem)

This is my ember-cli-build.js file:

ember-cli-build.js

I see that the problem is that dojo is not referencing to its root directory, since the has.js file is from the Dojo library.

vendor/arcgis and vendor/arcgis/dojo content:

vendor/arcgis folder vendor/arcgis/dojo folder
As you can see has.js is inside the dojo folder.

Any idea about how I can fix this?

Thank you,

Add option to have injected javascript non-inline

Prior to version 2, this addon had the ability add the injected javascript in a hosted src file (amd-start & amd-config.js) instead of always putting the code inline.

Due to security concerns (such as a CSP that does not allow inline scripts) this functionality should be re-implemented.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.