Storybook - Ember.js - Getting stuck on loading state

I've installed storybook/ember on an existing Ember project, but unfortunatelly it stuck on loading screen with no error - doesn't display the welcome page and shows the spinner instead.

.storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

I haven't touched anything in the stories or .storybook (everythins is the default).

package.json

{
  "name": "web-ui",
  "version": "0.0.0",
  "description": "Small description for web-ui goes here",
  "repository": "",
  "license": "MIT",
  "author": "",
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "private": true,
  "scripts": {
    "build": "ember build",
    "lint:hbs": "ember-template-lint .",
    "lint:js": "eslint .",
    "start": "ember serve",
    "test": "ember test -r xunit",
    "coverage": "COVERAGE=true ./node_modules/.bin/ember test --silent",
    "storybook": "start-storybook -p 6006 -s dist",
    "build-storybook": "build-storybook -s dist"
  },
  "engines": {
    "node": ">= 10.*"
  },
  "devDependencies": {
    "@babel/core": "7.11.6",
    "@ember/jquery": "1.1.0",
    "@ember/optional-features": "2.0.0",
    "@glimmer/component": "1.0.1",
    "@storybook/addon-actions": "^6.0.22",
    "@storybook/addon-essentials": "^6.0.22",
    "@storybook/addon-links": "^6.0.22",
    "@storybook/ember": "^6.0.22",
    "acorn": "^8.0.1",
    "babel-eslint": "10.1.0",
    "babel-loader": "^8.1.0",
    "babel-plugin-ember-modules-api-polyfill": "^3.1.1",
    "babel-plugin-htmlbars-inline-precompile": "^4.2.0",
    "bootstrap": "3.4.1",
    "broccoli-asset-rev": "3.0.0",
    "broccoli-funnel": "3.0.3",
    "broccoli-merge-trees": "4.2.0",
    "browser": "0.2.6",
    "d3": "6.1.1",
    "ember-ajax": "5.0.0",
    "ember-auto-import": "1.6.0",
    "ember-can": "3.0.0",
    "ember-cli": "3.16.0",
    "ember-cli-app-version": "3.2.0",
    "ember-cli-babel": "7.22.1",
    "ember-cli-code-coverage": "1.0.0",
    "ember-cli-content-security-policy": "1.1.1",
    "ember-cli-dependency-checker": "3.2.0",
    "ember-cli-document-title-northm": "1.0.3",
    "ember-cli-htmlbars": "5.3.1",
    "ember-cli-inject-live-reload": "2.0.2",
    "ember-cli-json-module": "1.0.0",
    "ember-cli-jstree": "1.0.12",
    "ember-cli-less": "3.0.1",
    "ember-cli-mirage": "1.1.8",
    "ember-cli-nouislider": "1.2.1",
    "ember-cli-pagination": "3.1.5",
    "ember-cli-sri": "2.1.1",
    "ember-cli-template-lint": "1.0.0-beta.3",
    "ember-cli-test-loader": "3.0.0",
    "ember-cli-uglify": "3.0.0",
    "ember-data": "3.16.0",
    "ember-diff-attrs": "0.2.2",
    "ember-disable-proxy-controllers": "1.0.2",
    "ember-export-application-global": "2.0.1",
    "ember-flatpickr": "2.16.2",
    "ember-infinity": "2.1.2",
    "ember-inflector": "3.0.1",
    "ember-inline-svg": "1.0.0",
    "ember-intl": "5.4.2",
    "ember-load-initializers": "2.1.1",
    "ember-math-helpers": "2.15.0",
    "ember-maybe-import-regenerator": "0.1.6",
    "ember-power-select": "3.0.4",
    "ember-qunit": "4.6.0",
    "ember-radio-button": "2.0.1",
    "ember-resolver": "7.0.0",
    "ember-simple-auth": "2.1.1",
    "ember-source": "3.16.0",
    "ember-storage": "2.0.0",
    "ember-table": "2.2.3",
    "ember-template-lint": "1.13.2",
    "ember-tooltips": "3.4.5",
    "ember-truth-helpers": "2.1.0",
    "ember-vega": "1.1.5",
    "emberx-select": "3.1.1",
    "eslint": "5.16.0",
    "eslint-plugin-ember": "7.7.2",
    "eslint-plugin-node": "11.1.0",
    "jquery-mockjax": "2.6.0",
    "jshint": "2.12.0",
    "json-merger": "1.1.2",
    "loader.js": "4.7.0",
    "material-design-icons-iconfont": "4.0.5",
    "minimatch": "3.0.4",
    "node-gyp": "6.0.0",
    "qunit-dom": "1.5.0",
    "react-is": "^16.13.1",
    "request": "2.88.2",
    "rsvp": "4.8.5",
    "valid-url": "1.0.9",
    "vega-lib": "4.4.0",
    "yaml-lint": "1.2.4"
  },
  "dependencies": {
    "@ember/test-helpers": "^1.7.2",
    "@storybook/core": "^6.0.22",
    "core-js": "^3.6.5",
    "faker": "^4.1.0",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
    "semver": "^6.3.0",
    "ts-dedent": "^2.0.0"
  }
}

Any help/suggestions are appreciated.

POST works in Postman but not in browser ember

The frontend is using Ember and the backend uses Springboot (using maven to build). When I use postman to test the endpoints, everything works. But when I try to send the request using my code, it doenst send a request.

This is the code in my Ember app. I also tried ember-cli-cors already.

@action async myfunction() {
const payload = {
    "colour": "pink",
    "height": "tall",
    "sport": "hockey"
};

const url = 'my backend url';
let response = await fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/vnd.api+json'
    },
    body.payload
    });
  let json = await response.json();
  return;
 }
}

Ember + Mirage: response mock errors

  // Some code from router
  return user.save().catch(e => {
    debugger; // says: ErrorClass {isAdapterError: true, stack: "Error: The adapter rejected the commit because it was invalid}
  });

  // Test
  import { Response } from 'miragejs';

  test('Show error page when failed uniqueness validation', async function(assert) {
    server.post('/users', () => {
      return new Response(422, {}, { errors: [{ detail: 'has already been taken' }] });
    });

    await visit('/users/new?email=test@email.com');
  });

I'm using Ember 3.16 and ember-cli-mirage 1.1.8. I have a test which is not working properly. I'm mocking a 422 Response from mirage. This response also contains some errors. In the router, where the request is made, the request fails (enters the catch) but when I inspect the error it doesn't tell me the status code or the details of it

Access HTML element from Glimmer component without modifier

is it possible to access component's HTML element in Glimmer components without the use of did-insert helper? Something as simple as this.element or this.elementId in non-glimmer elements.

I've created a class that extends Component that all my components will be extending. After my "special" component is created I want to manipulate with its DOM.

Unable to make a request to remote api from localhost

I am trying to re-write emberJS app from 2.8 to 3.21, anyway ... I have implemented ember-simple-auth, i am running api (sailsjs) app on my machine as well as my emberJS machine. Everything worked until i felt i need to see a page with staging data from staging server which is hosted on aws server. Then problems occured. When i call f.e. /users to aws api i get:

router.js:1212 Error while processing route: dash-board.admins Ember Data Request GET http://xxx/users returned a 403
Payload (text/html; charset=utf-8)
You are not permitted to perform this action. Error: Ember Data Request GET http://xxx/users returned a 403
Payload (text/html; charset=utf-8)
You are not permitted to perform this action.
    at ErrorClass.AdapterError (http://localhost:4200/assets/vendor.js:83508:29)
    at new ErrorClass (http://localhost:4200/assets/vendor.js:83541:24)
    at ApplicationAdapter.handleResponse (http://localhost:4200/assets/vendor.js:85431:18)
    at ajaxError (http://localhost:4200/assets/vendor.js:85756:25)
    at ajaxErrorHandler (http://localhost:4200/assets/vendor.js:85832:12)
    at ApplicationAdapter.hash.error (http://localhost:4200/assets/vendor.js:85528:23)
    at c (http://localhost:4200/assets/vendor.js:80494:28294)
    at Object.fireWith [as rejectWith] (http://localhost:4200/assets/vendor.js:80494:29039)
    at l (http://localhost:4200/assets/vendor.js:80494:79825)
    at XMLHttpRequest.<anonymous> (http://localhost:4200/assets/vendor.js:80494:82254)

This doesn't happen on my local backand running on localhost:1337

//../authenticators/custom.js

import Base from 'ember-simple-auth/authenticators/base';
import jQuery from 'jquery';
import config from 'wash-app-dashboard3/config/environment';
import { inject as service } from '@ember/service';

jQuery.ajaxSetup({
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  }
});

export default Base.extend({
  
  session: service(),
...
  authenticate(email, password) {
    let data = {
      email: email,
      password: password
    }

    return Ember.RSVP.resolve(jQuery.ajax({
      type: 'POST',
      url: config.APP.apiURL + '/login',
      data: data
    }))
  },
  invalidate(data) {
..
  }
});

I have tried to set contentSecurityPolicy for ENV in environment.

///.../adapters/application.js

import JSONAPIAdapter from '@ember-data/adapter/json-api';
import config from 'wash-app-dashboard3/config/environment';

export default class ApplicationAdapter extends JSONAPIAdapter {
    namespace = 'v1/admin';
    host = config.APP.apiURL;
    headers = { 'Authorization': config.APP.apiKey };

    ajax(url, method, hash = {}) {

        if (config.APP.usingCors) {
            hash.crossDomain = true;

            if (config.APP.corsWithCreds) {
                hash.xhrFields = { withCredentials: true };
            }
        }
        
        return super.ajax(url, method, hash);
    }
}

i am seeing in chrome console the Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute but i can't find anything useful about it with regards of ember js. Any hints would be highly appreciated.

Ember update page title

In my Ember app (actually mine is an engine within a host/parent app), I want to set the page title.

Now while I do

document.title = "Page title I want" 

However, it gets overwritten by the host app i.e. what is set in the index.html

Where can I have the above code to set page title? Already tried adding in beforeModel, didTransition hooks, But that does not work.

How to Copy Values to Empty Object List in Ember

I have an empty ember object list.

formattedlist: [
    {
        id:'',
        topic:'',
        content:''
    }
]

I push values to this list while iterating from another.

    _languageChange: function () {
    let that = this;
    let languageTexts = this.get('app').lang;

    this.get('formattedlist').clear();

    Ember.$.each(this.get('quizlist'),function(index, params) {
        let topic = languageTexts.messages[params.topic];
        let content = languageTexts.messages[params.content];
        that.get('formattedlist').pushObject({id:params.id, topic: topic, content: content});
    });
}

And it works fine. Instead of clearing and pushing object I need to create a local object list and set values to the local one.

And assign that list to the class level variable formattedlist: []. I'm using ember 1.1 version.
Please help me. Thank you.

Visual Studio Code refactors the decorators

I'm new to using Visual Studio Code. I have an EmberJS project and there is the following code:

  @on('didInsertElement')
  _initialize() {
    // Code
  },

For some reason, the VS refactors it to be:

  @on('didInsertElement')
_initialize() {
  // Code
},

Meaning it removes the spaces under @on('didInsertElement'). The file ends with *.js.es6. I installed vscode-ember in the VS market but it still didn't solve the problem. How can I do it?

EmberJS: `ember serve --environment=test` renders blank page

My team is moving to use Cypress for integration testing rather than Embers Acceptance tests. Before, we would just run ember test which set the environment to "test". Now, I don't want to run embers testing suite but I still want the "test" version of our app. So I want to be able to run ember serve --environment=test. However, I noticed that when I did this, I just get a blank screen. The weirdest thing is that when I change it to ember serve --environment=haha (haha being a random environment name that never existed before), I start seeing the app hit my routes like I would expect. I start actually getting application errors in code we wrote in the source, whereas with the test environment, I couldn't even hit a console.log in the application route.

I want to be able to serve my app with the test environment because we're using it for testing. Is this possible? I'm specifically wondering if there's a bunch of magic under the hood with that environment that makes this impossible or if it's just something else I need to do that I'm missing.

How do you package an ember-electron app to not include the dependencies for the UI?

We believe we have followed the standard instructions for setting up an ember-electron app. However, when we run

ember electron:package

and look inside the node modules directory in the output:

electron-out/ui-linux-x64/resources/app/node_modules

we see a lot of the dependencies that are required by the ember application, but are not required by Electron. This is causing an output package that is too large (about 1GB).

As far as I am aware the package.json file contains all the packages for both the Ember app as well as the Electron "server" side. Do we need to change our setup? Call the package command with additional arguments? Move Ember dependencies to devDendencies? Somehow change it so that there are two package.json files?

Thanks

Nested index route not rendering in outlet properly

I'm trying to render taking-cash/index inside taking-cash's :

router.js:

  this.route('retirement-options', function () {
    this.route('taking-cash');

It doesn't render it inside the outlet, unless I explicitly specify the /index path:

  this.route('retirement-options', function () {
    this.route('taking-cash', function() {
      this.route('index', { path: '' });
    });
  });

Why isn't /index implied, can I not specify it in router.js?

Is this a valid usage of @cached for autotracking of Ember Octane?

Recently I encounted an use case of @cached from tracked-toolbox when writing a glimmer component with autotracking. Here is an example code snippet:

import Component from '@glimmer/component';

/**
 * Example usage
 * <PersonInfo
 *  @a=
 *  @b=
 *  @c=
 * />
 * Where objA can be a large object
 */

export default class PersonInfo extends Component {

  /**
   * I hope @cached here can help avoid re-running output getter in each
   * of the other getters, e.g. this.msg, this.link, this.name
   * But whenever any input args changes it triggers update 
   * (i.e. parent run this.objA = newObj)
   */
  get output() {
    return someExpensiveLogic(this.args.a, this.args.b, this.args.c);
  }

  get msg() {
    return translate(this.output.msg);
  }

  get link() {
    return convert(this.output.link);
  }

  get name() {
    return change(this.output.name);
  }
}

<div>
  
  
  
</div>

Without using @cached, the above code will execute the output getter 3 times when rendering, once for each of msg, link and name.

I also thought about building my own cache for output, but it requires me to manually keep track of which state is used and hash them, which could be expensive and hard to maintain.

From my understanding, what @cached provides is an access to the "global tag" in the auto tracking system, so I can rely on that tag to determine when the cache needs refresh.

Since this is not supported in voyager-web as for now, I hope this usage can encourage us to add such support later.

Note: I found that @cached is convenient wrapper of

import { createCache, getValue } from '@glimmer/tracking/primitives/cache';

So fundamentally what I need is @glimmer/tracking/primitives/cache.

Ember 2 Web App using SignalrR from .Net Core 3 API

We have an ember version 2.18 web application, which talks to a .Net Core 3 api. But we have been trying to implement Signalr, with the api as the signalr server and the ember app as the signalr client. I have got the api working with a mockup Asp.Net website, so it does work.

But we are having issues with ember and there appears to be a significant lack of new articles on this. The only thing we can find seems to point to be using the old signalr, where it calls the negotiate endpoint, which as stated in this answer: Asp .Net Core 2 + SignalR (1.0.0-alpha2-27025) + /signalr/negotiate 404 Error will not work.

Does anyone have any solutions or links on how to set this up the latest SignalR with ember 2 and a .Net Core 3 api?

Cannot update tracked property via did-update in Ember JS

I am trying to use did-update in my template to trigger an action within my component from another component. I have done this before but never with an action that updated a tracked property.

I am trying to show a modal window whose display relies on the tracked property.

I have tried with another tracked property that is not called in another function in that component and I get the same error.

Is it at all possible to update a tracked property through this method?

// template


// component
@tracked isShareOpen = false;
@action
triggerShare() {
  this.isShareOpen = !this.isShareOpen;
}

I am getting the following error

index.js:172 Uncaught (in promise) Error: Assertion Failed: You attempted to update `isShareOpen` on `ListingShareComponent`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`isShareOpen` was first used:

- While rendering:
  ----------------
    (instance of a `(unknown object)` modifier)

Ember: Set model data to component value?

I tried to set a model data into an ember component data. But it didn't work.

actions: {
   setValue(modelData, type) {
         // this doesn't work
         this.set('currentType', type);
         this.set('currentData', modelData);
         // this also doesn't work
         this.setProperties({
             currentType: type,
             currentData: modelData
         });

   }
}

And got this error

Is there a way to SEO pages that dynamically change on EmberJS?

I have an ember app that has a page that dynamically change the content. Example url: mydomain.com/shops/show/products/120

The issue is SEO on this page didn't work (unable to crawl this page) and when I sent a link of this page to social networks, it doesn't display the correct meta tags I set.

Ember model hook not getting called

When I go to the template page associated with EnduserAnalyticsProfileAnalyticsRoute the model hook in this route file does not fire and I cant quite figure out why. I am trying to return some information in an RSVP.hash but I am not sure how to return this if my model hook does not fire.

(function() {
  const { changeStartDate, changeEndDate } = Sw.Lib.RouteHelpers;
  Sw.EnduserAnalyticsProfileAnalyticsRoute = Ember.Route.extend({
    currentAccount: service(),
    profileAnalytics: Ember.inject.service(),

    model: function(params) {
      debugger
      const id = this.get('currentAccountService.account.id')
      console.log("IN MODEL HOOK1")
      const profileView =  this.get('profileAnalytics').analytics(id).then((result) => {
        console.log("IN MODEL HOOK")
        return result;
      });
      const view = "test"
      return Ember.RSVP.hash([profileView, view]);
    },
    setupController(controller, hash) {
      controller.setProperties(hash);
    },
  
    actions: {
      changeStartDate: changeStartDate,
      changeEndDate: changeEndDate,
    },
  });
})
  

Regex for Alpha Numeric and some special characters

I have a input controller which I want to allow only Alpha Numeric values and -,@ and # special characters, I have using the following input-filter, input-filter='[A-Za-z0-9 -_@#]{1,20}', it is allowing but Alpha Numeric values properly but not allowing special characters, -,@ and #, what am I doing wrong, can somebody please help me - thanks a lot.

How to declare simple variable in .js file for Ember

For some reason this does not work in the js file of my Ember app:

var i = 0;
while (i < 20) {
    arr.push(i++);
}

I also tried @var but for the 'less than' sign, it says ", expected". I am confused.

Related objects not showing even when present in data store

I'm learning Ember (3.21) and am at a loss as to why related items will not show as being attached to their parent model when retrieving from the store. I am having trouble finding answers to this question in Ember Octane, as most similar answers are for older versions and no one seems to be having this issue.

For context, I'm creating a very simple todo list app.

Looking in Ember inspector, my api returns properly and all records are added to the store:

My (JSON) rails api returns the data properly, with each todoList object containing the list of relationships in the data property and the full object in the relationships property. in TodoListsRoute:

model() {
    return this.store.findAll('todo-list');
}

In todo-lists.hbs:

    
       <TodoList @todoList= @delete=/>
    
    

in todo-list.hbs (the custom component referred to as <Todolist ...>), each todo list title/description displays fine. My issue is that I cannot get any of the todo items underneath the lists to display. Here's the code where i try to do that:

<div class="todo-list-items">
    <div>
        <button class="delete-button" ><i class="fas fa-trash"></i></button>
    </div>
    
    <div>
        
    </div>
    
</div>

Logging this.args.todoList.todoItems into the console returns a full class, but it doesnt seem to contain any actual todoItem data.

Any help greatly appreciated.

Glimmer.js how to reset tracked property to initial value without using the constructor

In Glimmer.js, what is the best way to reset a tracked property to an initial value without using the constructor?

Note: Cannot use the constructor because it is only called once on initial page render and never called again on subsequent page clicks.

TypeError: babelAddon.buildBabelOptions is not a function

I am having an ember application with following ember dependencies and version

"ember-cli": "2.18.0",
"ember-cli-app-version": "^2.0.1",
"ember-cli-babel": "^5.1.7",
...

I run yarn to fetch all dependencies and it worked perfectly fine but when I run the ember application I am getting

babelAddon.buildBabelOptions is not a function

Below is the complete log.

- broccoliBuilderErrorStack: [undefined]
  - code: [undefined]
  - codeFrame: [undefined]
  - errorMessage: babelAddon.buildBabelOptions is not a function
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: babelAddon.buildBabelOptions is not a function
  - name: TypeError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: TypeError: babelAddon.buildBabelOptions is not a function
    at Package.buildBabelOptions (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/package.js:47:39)
    at new Package (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/package.js:30:46)
    at Function.lookup (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/package.js:38:35)
    at new AutoImport (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/auto-import.js:26:45)
    at Function.lookup (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/auto-import.js:39:27)
    at Class.included (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-auto-import/js/index.js:26:48)
    at Class.superWrapper [as included] (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-cli/node_modules/core-object/lib/assign-properties.js:34:20)
    at /Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-cli/lib/models/addon.js:405:26
    at Array.reduce (<anonymous>)
    at Class.eachAddonInvoke (/Users/sahilpaudel/Documents/PharmEasy/Elixir/AfterGlow/frontend/node_modules/ember-cli/lib/models/addon.js:402:24)

Any help please.

How to distinguish between manual and automatic session invalidation

In my app, I want to send a log request to the api after every session invalidation. I want to be able to differentiate when a user logs out (clicks on the button), and when he is automatically logged out (for example after cookie expiration). As far as I know, the sessionInvalidated event does not make the difference, and I could'nt find a way to do that.

Heroku + Ember buildback unable to donwload node

I am using the buildback for Ember.js : https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz

When I push and Heroku builds, i'm getting (triend both with 12.x and 14.x). And I am gettting thoses error logs.

remote: Resolving node version 12.x via semver.io... remote: Downloading and installing node 12.18.3... remote: Unable to download node 12.18.3; does it exist ?

I had other similar apps with the same config, and they did build OK previously

Ember rootURL based navigation

I have been a backend developer and I am currently dabbling with Ember code. I have a requirement such that two ember apps should be served from same domain.

Referred this: https://guides.emberjs.com/release/configuring-ember/embedding-applications/#toc_specifying-a-root-url

Lets say I am serving the website from http://example.com

App1 is served from http://example.com/foo/

App2 is served from http://example.com/bar/

Here is the sample configuration I used for environment.js:

App 1:

let ENV = {
    modulePrefix: 'my-app',
    environment,
    rootURL: '/foo/',
    locationType: 'hash'
}

App 2:

let ENV = {
    modulePrefix: 'my-app',
    environment,
    rootURL: '/bar/',
    locationType: 'hash'
}

After making these changes I expect them to work fine. But whenever I visit App2 served from http://example.com/bar/#route/route-page, it is showing rootURL as /foo/ in ember-inspector.

Help would be much appreciated to route them accordingly. Thank You!

What is the Ember Octane replacement for `didInsertElement`?

I’m trying to fire a callback passed down from a parent component. Our old pattern for handling this was to call the function in didInsertElement. In Octane, I see that we can use the did-insert modifier but that seems weird for this use case since we’re not updating the DOM element that we’d use to call did-insert. I've also seen onRender being used in a few cases but I don’t see documentation on that and it’s not firing for me. Any suggestions?

For this specific use case, we have a parent component that can have one of many child components. And for each child component we have specific text that gets displayed in the parent component and we want the child component to be the owner of that text.

Post install is replacing npm install folder in linux

I am doing npm install ,after that it is creating node modules folder . then there is post install option is there which is working fine in windows but in Linux box it is deleting node modules and creating again . package.json format:

{

"someDependency":{ "@fortawesome/ember-fontawesome": "0.1.9", "@fortawesome/free-regular-svg-icons": "5.1.0", }, "scripts":{ "postInstall": "npm install --abc download" } }

can anyone help me with how to resolve the issue.

Named blocks in Ember

Is there a way to have "named blocks"? For example,

And somewhere else in the code,

  <div class="wrapper">
    
  </div>

  

Emberjs Cannot read property 'insertBefore' of undefined

I have updated an application from ember@2.13 to ember@3.21. After adjusting the code with the new format I've got stuck with an error: Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of undefined that couldn't track exactly where is coming from. The error is occurring in the dist/ folder, that is generated by ember.

Is there any information that could help me about this error?

Complete stack trace:

How to use Ember for all pages except the index page

I have an ember project, and it's getting heavier. I want the landing page to load faster, therefore I want to make it static HTML (without loading ember js files). All other pages I want to have in ember.

So, I want site.com to serve my HTML static page (not ember), but site.com/page1 and site.com/page2 to serve ember pages.

Is it possible?

glimmer.js time not updating

javascript

import Component from '@glimmer/component';
export default class TimerTrackerComponent extends Component {
    time = null;

    constructor(){
        super(...arguments);
        this.loadTime();
    }

    loadTime(){
        let timeNow = new Date();
        this.time = timeNow.toLocaleTimeString();
        setInterval(() => {this.loadTime();}, 1000);
    }
}

hbs

<div>
    <p></p>
</div>

I want to show a regular clock that updates every second but it only prints once or prints the same time over and over again. I tried adding an alert in the setInterval and it outputs the correct time every second.

EmberJS: Dynamic properties for Ember data model (native class)

I'm working on migrating from EmberObject to native classes (using Ember 3.16), but I've got an issue. Basically, I need to set dynamic properties to some models. These properties are defined elsewhere, but for simplicity sake, I'm going to define them in the component files in the following examples.

Here are my EmberObject model and native class model:

// EmberObject
import Model from 'ember-data/model';
import attr from 'ember-data/attr';

function getAttrs(config) {
  return Object.keys(config).reduce((reduced, key) => {
    const transform = config[key].type === 'text' ? 'string' : '';
    reduced[key] = attr(transform);
    return reduced;
  }, {});
}

const dynamicProps = { location: { name: 'Location', type: 'text', defaultValue: '' } };

export default Model.extend(assign({
  comment: attr('string'),

}, dynamicProps));

//Native class
import Model, { attr } from '@ember-data/model';
import { assign } from '@ember/polyfills';

function getAttrs(config) {
  return Object.keys(config).reduce((reduced, key) => {
    const transform = config[key].type === 'text' ? 'string' : '';
    reduced[key] = attr(transform);
    return reduced;
  }, {});
}

const dynamicProps = { location: { name: 'Location', type: 'text', defaultValue: '' } };

export default class SomeModel extends Model {
  @attr('string') comment

  constructor() {
    super(...arguments);
    assign(this, dynamicProps);
  }
}

As you can see, what I want is for the native class to have a @attr('string') location in this example, but this isn't working for me.

What does the "pull-based functional reactive program" mean in Glimmer VM?

As I saw the notion "pull-based functional reactive program"" in this article: https://engineering.linkedin.com/blog/2017/06/glimmer--blazing-fast-rendering-for-ember-js--part-2

As I know, the "pull-based" means we have to use a regular polling way to check and update the UI according to the latest value of the states. But I think there would be a lot of wasteful "polling" and may even cause the inefficiency of the app running if the app has a lot of states and they are actually not frequently changed most of the time.

So, I think there should be something I missed here, how can I understand that?

While a VM architecture is a novel way of modeling rendering, the initial execution of the VM sets up Reference and Revision Tag subsystems, which allow us to model a pull-based functional reactive program (FRP) used for updating the UI. What this means in practice is that there is no notion of observers or subscriptions to keep values updated in the UI, but rather that we allow the backing values in a template to freely mutate. For now, the simplest way to conceptualize this system is something like the following:

Ember v0.0.44 project not building with a "Use of const in strict mode." error message

I need to update a template in a fairly outdated ember project (its about 5 years old) but I'm unable to build it.

Here is the working environment:

Nodejs v0.10.46 (via NVM)
NPM    v2.15.1
Ember  v0.0.44
Bower

Here are the contents of the package.json file:

{
  "name": "xxxxx",
  "version": "0.0.0",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "test"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "https://github.com/stefanpenner/ember-cli",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "body-parser": "^1.2.0",
    "broccoli-asset-rev": "0.0.17",
    "broccoli-ember-hbs-template-compiler": "^1.6.1",
    "connect-restreamer": "^1.0.0",
    "ember-cli": "0.0.44",
    "ember-cli-ember-data": "0.1.0",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.0.2",
    "ember-cli-qunit": "0.1.0",
    "express": "^4.8.5",
    "glob": "^4.0.5"
  }
}

Here are the contents of the bower.json file:

{
  "name": "eam-ui",
  "dependencies": {
    "handlebars": "~1.3.0",
    "ember": "1.8.1",
    "jquery": "^1.11.0",
    "ember-resolver": "~0.1.7",
    "loader": "stefanpenner/loader.js#1.0.1",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "rwjblue/ember-cli-test-loader#0.0.4",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.2",
    "ember-qunit": "0.1.8",
    "ember-qunit-notifications": "0.0.4",
    "qunit": "~1.15.0",
    "foundation": "~5.4.7",
    "ember-i18n": "~2.2.1",
    "cldr": "~1.0.2",
    "es5-shim": "~4.0.1",
    "e164-phones-countries": "~1.0.3",
    "FileSaver.js": "koffsyrup/FileSaver.js"
  },
  "resolutions": {
    "jquery": "^1.11.0"
  }
}

Building the app produces the following output:

ember build
version: 0.0.44

/Users/xxxxxx/Documents/proj1050/xxxxx/node_modules/ember-cli-inject-live-reload/index.js:3
const buildLiveReloadPath = require('clean-base-url');
^^^^^
Use of const in strict mode.
SyntaxError: Use of const in strict mode.
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Function.Addon.lookup (/Users/xxxxxx/Documents/proj1050/xxxxx/node_modules/ember-cli/lib/models/addon.js:270:19)

I know this project is SUPER outdated. Any thoughts on what I can do resolve this build issue? Or should I start planning my escape???

Thanks in advance!

Run ember unit tests in parallel

In my Ember app (Node/NPM), I run the unit tests using the following

npm run test-coverage

Now the tests take a very long time to run. Is there some way to speed up the same by parallel execution of the tests ?

When running ember qunit tests, only 1 test runs

I'm currently in the process of integrating qunit tests into an existing ember application. I've followed the ember documentation in getting quint set up, however when I run ember test only 1 test is running (the default ember-qunit: Ember.onerror validation: Ember.onerror is functioning properly)

The old ember-mocha tests/index.html file was importing both pinterest and facebook pixels. I removed them because they were also causing issues when used with qunit. When included them they were giving me global failure and script error errors. I assumed these errors we're some kind of cross origin error but I couldn't figure out how to bypass it.

Also when I try to run a module test individually - ember test --module 'Acceptance | Routes | Signup' it tells me that No tests matched the module "Acceptance | Routes | Signup".

// package.json

"devDependencies": {
  "ember-qunit": "^4.6.0",
  "qunit-dom": "^1.2.0",
  "ember-cli": "~3.20.0"
}

I'm struggling with how to fix the issue. All input welcome. Thanks.