DEV: Import set, setProperties, helper, and string functions (#8297)

app/assets/javascripts/admin/components/secret-value-list.js.es6

@@ -1,6 +1,7 @@
 import { isEmpty } from "@ember/utils";
 import Component from "@ember/component";
 import { on } from "ember-addons/ember-computed-decorators";
+import { set } from "@ember/object";
 
 export default Component.extend({
   classNameBindings: [":value-list", ":secret-value-list"],
@@ -67,7 +68,7 @@ export default Component.extend({
 
   _replaceValue(index, newValue, keyName) {
     let item = this.collection[index];
-    Ember.set(item, keyName, newValue);
+    set(item, keyName, newValue);
 
     this._saveValues();
   },

app/assets/javascripts/admin/controllers/admin-user-index.js.es6

@@ -8,6 +8,7 @@ import { userPath } from "discourse/lib/url";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 import { fmt } from "discourse/lib/computed";
+import { htmlSafe } from "@ember/template";
 
 export default Controller.extend(CanCheckEmails, {
   adminTools: service(),
@@ -47,7 +48,7 @@ export default Controller.extend(CanCheckEmails, {
   automaticGroups(automaticGroups) {
     return automaticGroups
       .map(group => {
-        const name = Ember.String.htmlSafe(group.name);
+        const name = htmlSafe(group.name);
         return `<a href="/g/${name}">${name}</a>`;
       })
       .join(", ");

app/assets/javascripts/admin/controllers/admin.js.es6

@@ -1,6 +1,7 @@
 import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import computed from "ember-addons/ember-computed-decorators";
+import { dasherize } from "@ember/string";
 
 export default Controller.extend({
   router: service(),
@@ -27,7 +28,7 @@ export default Controller.extend({
           segment !== "admin"
         );
       })
-      .map(Ember.String.dasherize)
+      .map(dasherize)
       .join(" ");
 
     // this is done to avoid breaking css customizations

app/assets/javascripts/admin/controllers/modals/admin-install-theme.js.es6

@@ -10,6 +10,7 @@ import {
 } from "ember-addons/ember-computed-decorators";
 import { THEMES, COMPONENTS } from "admin/models/theme";
 import { POPULAR_THEMES } from "discourse-common/helpers/popular-themes";
+import { set } from "@ember/object";
 
 const MIN_NAME_LENGTH = 4;
 
@@ -46,7 +47,7 @@ export default Controller.extend(ModalFunctionality, {
   themes(installedThemes) {
     return POPULAR_THEMES.map(t => {
       if (installedThemes.includes(t.name)) {
-        Ember.set(t, "installed", true);
+        set(t, "installed", true);
       }
       return t;
     });

app/assets/javascripts/admin/helpers/disposition-icon.js.es6

@@ -1,6 +1,7 @@
 import { iconHTML } from "discourse-common/lib/icon-library";
+import Helper from "@ember/component/helper";
 
-export default Ember.Helper.extend({
+export default Helper.extend({
   compute([disposition]) {
     if (!disposition) {
       return null;

app/assets/javascripts/admin/helpers/post-action-title.js.es6

@@ -1,3 +1,5 @@
+import Helper from "@ember/component/helper";
+
 function postActionTitle([id, nameKey]) {
   let title = I18n.t(`admin.flags.short_names.${nameKey}`, {
     defaultValue: null
@@ -11,4 +13,4 @@ function postActionTitle([id, nameKey]) {
   return title;
 }
 
-export default Ember.Helper.helper(postActionTitle);
+export default Helper.helper(postActionTitle);

app/assets/javascripts/discourse-common/lib/helpers.js.es6

@@ -1,4 +1,5 @@
 import { get } from "@ember/object";
+import Helper from "@ember/component/helper";
 
 export function makeArray(obj) {
   if (obj === null || obj === undefined) {
@@ -8,7 +9,7 @@ export function makeArray(obj) {
 }
 
 export function htmlHelper(fn) {
-  return Ember.Helper.helper(function(...args) {
+  return Helper.helper(function(...args) {
     args =
       args.length > 1 ? args[0].concat({ hash: args[args.length - 1] }) : args;
     return new Handlebars.SafeString(fn.apply(this, args) || "");
@@ -29,7 +30,7 @@ function rawGet(ctx, property, options) {
 }
 
 export function registerHelper(name, fn) {
-  _helpers[name] = Ember.Helper.helper(fn);
+  _helpers[name] = Helper.helper(fn);
 }
 
 export function findHelper(name) {
@@ -84,7 +85,7 @@ export function registerUnbound(name, fn) {
     return fn.call(this, ...properties, resolveParams(this, options));
   };
 
-  _helpers[name] = Ember.Helper.extend({
+  _helpers[name] = Helper.extend({
     compute: (params, args) => fn(...params, args)
   });
   Handlebars.registerHelper(name, func);

app/assets/javascripts/discourse-common/resolver.js.es6

@@ -1,9 +1,7 @@
 import { findHelper } from "discourse-common/lib/helpers";
 import { get } from "@ember/object";
 import deprecated from "discourse-common/lib/deprecated";
-
+import { classify, dasherize } from "@ember/string";
-/* global requirejs, require */
-var classify = Ember.String.classify;
 
 const _options = {};
 
@@ -63,7 +61,7 @@ export function buildResolver(baseName) {
         split[1] = split[1].replace(".templates", "").replace("/templates", "");
 
         // Try slashes
-        let dashed = Ember.String.dasherize(split[1].replace(/\./g, "/"));
+        let dashed = dasherize(split[1].replace(/\./g, "/"));
         if (
           requirejs.entries[appBase + dashed] ||
           requirejs.entries[adminBase + dashed]
@@ -72,7 +70,7 @@ export function buildResolver(baseName) {
         }
 
         // Try with dashes instead of slashes
-        dashed = Ember.String.dasherize(split[1].replace(/\./g, "-"));
+        dashed = dasherize(split[1].replace(/\./g, "-"));
         if (
           requirejs.entries[appBase + dashed] ||
           requirejs.entries[adminBase + dashed]
@@ -86,7 +84,7 @@ export function buildResolver(baseName) {
     customResolve(parsedName) {
       // If we end with the name we want, use it. This allows us to define components within plugins.
       const suffix = parsedName.type + "s/" + parsedName.fullNameWithoutType,
-        dashed = Ember.String.dasherize(suffix),
+        dashed = dasherize(suffix),
         moduleName = Object.keys(requirejs.entries).find(function(e) {
           return (
             e.indexOf(suffix, e.length - suffix.length) !== -1 ||

app/assets/javascripts/discourse-loader.js

@@ -14,7 +14,9 @@ var define, requirejs;
       "@ember/object": {
         default: Ember.Object,
         get: Ember.get,
-        getProperties: Ember.getProperties
+        getProperties: Ember.getProperties,
+        set: Ember.set,
+        setProperties: Ember.setProperties
       },
       "@ember/object/computed": {
         default: Ember.computed,
@@ -78,8 +80,23 @@ var define, requirejs;
         Promise: Ember.RSVP.Promise,
         hash: Ember.RSVP.hash,
         all: Ember.RSVP.all
+      },
+      "@ember/string": {
+        dasherize: Ember.String.dasherize,
+        classify: Ember.String.classify,
+        underscore: Ember.String.underscore,
+        camelize: Ember.String.camelize
+      },
+      "@ember/template": {
+        htmlSafe: Ember.String.htmlSafe
+      },
+      "@ember/application": {
+        setOwner: Ember.setOwner,
+        getOwner: Ember.getOwner
+      },
+      "@ember/component/helper": {
+        default: Ember.Helper
       }
-
     };
   }
 

app/assets/javascripts/discourse/adapters/post.js.es6

@@ -1,6 +1,7 @@
 import { ajax } from "discourse/lib/ajax";
 import RestAdapter from "discourse/adapters/rest";
 import { Result } from "discourse/adapters/rest";
+import { underscore } from "@ember/string";
 
 export default RestAdapter.extend({
   find(store, type, findArgs) {
@@ -10,7 +11,7 @@ export default RestAdapter.extend({
   },
 
   createRecord(store, type, args) {
-    const typeField = Ember.String.underscore(type);
+    const typeField = underscore(type);
     args.nested_post = true;
     return ajax(this.pathFor(store, type), { method: "POST", data: args }).then(
       function(json) {

app/assets/javascripts/discourse/adapters/rest.js.es6

@@ -1,6 +1,7 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import { hashString } from "discourse/lib/hash";
+import { underscore } from "@ember/string";
 
 const ADMIN_MODELS = [
   "plugin",
@@ -66,7 +67,7 @@ export default EmberObject.extend({
   pathFor(store, type, findArgs) {
     let path =
       this.basePath(store, type, findArgs) +
-      Ember.String.underscore(store.pluralize(this.apiNameFor(type)));
+      underscore(store.pluralize(this.apiNameFor(type)));
     return this.appendQueryParams(path, findArgs);
   },
 
@@ -108,7 +109,7 @@ export default EmberObject.extend({
 
   update(store, type, id, attrs) {
     const data = {};
-    const typeField = Ember.String.underscore(this.apiNameFor(type));
+    const typeField = underscore(this.apiNameFor(type));
     data[typeField] = attrs;
 
     return ajax(
@@ -121,7 +122,7 @@ export default EmberObject.extend({
 
   createRecord(store, type, attrs) {
     const data = {};
-    const typeField = Ember.String.underscore(this.apiNameFor(type));
+    const typeField = underscore(this.apiNameFor(type));
     data[typeField] = attrs;
     return ajax(this.pathFor(store, type), this.getPayload("POST", data)).then(
       function(json) {

app/assets/javascripts/discourse/components/cdn-img.js.es6

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import computed from "ember-addons/ember-computed-decorators";
+import { htmlSafe } from "@ember/template";
 
 export default Component.extend({
   tagName: "",
@@ -12,7 +13,7 @@ export default Component.extend({
   @computed("width", "height")
   style(width, height) {
     if (width && height) {
-      return Ember.String.htmlSafe(`--aspect-ratio: ${width / height};`);
+      return htmlSafe(`--aspect-ratio: ${width / height};`);
     }
   }
 });

app/assets/javascripts/discourse/components/group-flair-inputs.js.es6

@@ -5,6 +5,7 @@ import { observes } from "ember-addons/ember-computed-decorators";
 import { escapeExpression } from "discourse/lib/utilities";
 import { convertIconClass } from "discourse-common/lib/icon-library";
 import { ajax } from "discourse/lib/ajax";
+import { htmlSafe } from "@ember/template";
 
 export default Component.extend({
   classNames: ["group-flair-inputs"],
@@ -77,7 +78,7 @@ export default Component.extend({
 
     if (flairHexColor) style += `color: #${flairHexColor};`;
 
-    return Ember.String.htmlSafe(style);
+    return htmlSafe(style);
   },
 
   @computed("model.flairBackgroundHexColor")

app/assets/javascripts/discourse/components/mount-widget.js.es6

@@ -6,6 +6,7 @@ import { WidgetClickHook } from "discourse/widgets/hooks";
 import { queryRegistry } from "discourse/widgets/widget";
 import { getRegister } from "discourse-common/lib/get-owner";
 import DirtyKeys from "discourse/lib/dirty-keys";
+import { camelize } from "@ember/string";
 
 let _cleanCallbacks = {};
 export function addWidgetCleanCallback(widgetName, fn) {
@@ -80,7 +81,7 @@ export default Component.extend({
   afterPatch() {},
 
   eventDispatched(eventName, key, refreshArg) {
-    const onRefresh = Ember.String.camelize(eventName.replace(/:/, "-"));
+    const onRefresh = camelize(eventName.replace(/:/, "-"));
     this.dirtyKeys.keyDirty(key, { onRefresh, refreshArg });
     this.queueRerender();
   },

app/assets/javascripts/discourse/components/reviewable-item.js.es6

@@ -5,6 +5,8 @@ import computed from "ember-addons/ember-computed-decorators";
 import Category from "discourse/models/category";
 import optionalService from "discourse/lib/optional-service";
 import showModal from "discourse/lib/show-modal";
+import { dasherize } from "@ember/string";
+import { set } from "@ember/object";
 
 let _components = {};
 
@@ -65,7 +67,7 @@ export default Component.extend({
       return _components[type];
     }
 
-    let dasherized = Ember.String.dasherize(type);
+    let dasherized = dasherize(type);
     let templatePath = `components/${dasherized}`;
     let template =
       Ember.TEMPLATES[`${templatePath}`] ||
@@ -185,7 +187,7 @@ export default Component.extend({
     },
 
     valueChanged(fieldId, event) {
-      Ember.set(this._updates, fieldId, event.target.value);
+      set(this._updates, fieldId, event.target.value);
     },
 
     perform(action) {

app/assets/javascripts/discourse/components/user-card-contents.js.es6

@@ -13,6 +13,7 @@ import CanCheckEmails from "discourse/mixins/can-check-emails";
 import CardContentsBase from "discourse/mixins/card-contents-base";
 import CleansUp from "discourse/mixins/cleans-up";
 import { prioritizeNameInUx } from "discourse/lib/settings";
+import { set } from "@ember/object";
 
 export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
   elementId: "user-card",
@@ -76,7 +77,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
         .filterBy("show_on_user_card", true)
         .sortBy("position")
         .map(field => {
-          Ember.set(field, "dasherized_name", field.get("name").dasherize());
+          set(field, "dasherized_name", field.get("name").dasherize());
           const value = userFields ? userFields[field.get("id")] : null;
           return isEmpty(value) ? null : EmberObject.create({ value, field });
         })

app/assets/javascripts/discourse/controllers/discovery/categories.js.es6

@@ -2,6 +2,7 @@ import { reads } from "@ember/object/computed";
 import { inject } from "@ember/controller";
 import computed from "ember-addons/ember-computed-decorators";
 import DiscoveryController from "discourse/controllers/discovery";
+import { dasherize } from "@ember/string";
 
 const subcategoryStyleComponentNames = {
   rows: "categories_only",
@@ -44,7 +45,7 @@ export default DiscoveryController.extend({
       parentCategory && style === "categories_and_latest_topics"
         ? "categories_only"
         : style;
-    return Ember.String.dasherize(componentName);
+    return dasherize(componentName);
   },
   actions: {
     refresh() {

app/assets/javascripts/discourse/controllers/edit-topic-timer.js.es6

@@ -4,6 +4,7 @@ import { default as computed } from "ember-addons/ember-computed-decorators";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import TopicTimer from "discourse/models/topic-timer";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { setProperties } from "@ember/object";
 
 export const CLOSE_STATUS_TYPE = "close";
 export const OPEN_STATUS_TYPE = "open";
@@ -78,7 +79,7 @@ export default Controller.extend(ModalFunctionality, {
         if (time) {
           this.send("closeModal");
 
-          Ember.setProperties(this.topicTimer, {
+          setProperties(this.topicTimer, {
             execute_at: result.execute_at,
             duration: result.duration,
             category_id: result.category_id

app/assets/javascripts/discourse/controllers/user.js.es6

@@ -9,6 +9,7 @@ import computed from "ember-addons/ember-computed-decorators";
 import User from "discourse/models/user";
 import optionalService from "discourse/lib/optional-service";
 import { prioritizeNameInUx } from "discourse/lib/settings";
+import { set } from "@ember/object";
 
 export default Controller.extend(CanCheckEmails, {
   indexStream: false,
@@ -115,7 +116,7 @@ export default Controller.extend(CanCheckEmails, {
         .filterBy("show_on_profile", true)
         .sortBy("position")
         .map(field => {
-          Ember.set(field, "dasherized_name", field.get("name").dasherize());
+          set(field, "dasherized_name", field.get("name").dasherize());
           const value = userFields
             ? userFields[field.get("id").toString()]
             : null;

app/assets/javascripts/discourse/helpers/dasherize.js.es6

@@ -1,5 +1,7 @@
+import Helper from "@ember/component/helper";
+
 function dasherize([value]) {
   return (value || "").replace(".", "-").dasherize();
 }
 
-export default Ember.Helper.helper(dasherize);
+export default Helper.helper(dasherize);

app/assets/javascripts/discourse/helpers/editable-value.js.es6

@@ -1,4 +1,6 @@
 import { get } from "@ember/object";
+import Helper from "@ember/component/helper";
+
 export function formatCurrency([reviewable, fieldId]) {
   // The field `category_id` corresponds to `category`
   if (fieldId === "category_id") {
@@ -15,4 +17,4 @@ export function formatCurrency([reviewable, fieldId]) {
   return value;
 }
 
-export default Ember.Helper.helper(formatCurrency);
+export default Helper.helper(formatCurrency);

app/assets/javascripts/discourse/initializers/subscribe-user-notifications.js.es6

@@ -11,6 +11,7 @@ import {
   unsubscribe as unsubscribePushNotifications,
   isPushNotificationsEnabled
 } from "discourse/lib/push-notifications";
+import { set } from "@ember/object";
 
 export default {
   name: "subscribe-user-notifications",
@@ -120,7 +121,7 @@ export default {
       });
 
       bus.subscribe("/client_settings", data =>
-        Ember.set(siteSettings, data.name, data.value)
+        set(siteSettings, data.name, data.value)
       );
       bus.subscribe("/refresh_client", data =>
         Discourse.set("assetVersion", data)

app/assets/javascripts/discourse/lib/show-modal.js.es6

@@ -1,3 +1,5 @@
+import { dasherize } from "@ember/string";
+
 export default function(name, opts) {
   opts = opts || {};
   const container = Discourse.__container__;
@@ -13,7 +15,7 @@ export default function(name, opts) {
   modalController.set("name", controllerName);
 
   let controller = container.lookup("controller:" + controllerName);
-  const templateName = opts.templateName || Ember.String.dasherize(name);
+  const templateName = opts.templateName || dasherize(name);
 
   const renderArgs = { into: "modal", outlet: "modalBody" };
   if (controller) {

app/assets/javascripts/discourse/models/composer.js.es6

@@ -18,6 +18,7 @@ import { escapeExpression, tinyAvatar } from "discourse/lib/utilities";
 import { propertyNotEqual } from "discourse/lib/computed";
 import throttle from "discourse/lib/throttle";
 import { Promise } from "rsvp";
+import { set } from "@ember/object";
 
 // The actions the composer can take
 export const CREATE_TOPIC = "createTopic",
@@ -859,7 +860,7 @@ const Composer = RestModel.extend({
     Object.keys(serializer).forEach(f => {
       const val = this.get(serializer[f]);
       if (typeof val !== "undefined") {
-        Ember.set(dest, f, val);
+        set(dest, f, val);
       }
     });
     return dest;

app/assets/javascripts/discourse/models/store.js.es6

@@ -3,6 +3,8 @@ import { ajax } from "discourse/lib/ajax";
 import RestModel from "discourse/models/rest";
 import ResultSet from "discourse/models/result-set";
 import { getRegister } from "discourse-common/lib/get-owner";
+import { underscore } from "@ember/string";
+import { set } from "@ember/object";
 
 let _identityMap;
 
@@ -96,7 +98,7 @@ export default EmberObject.extend({
       const apiName = this.adapterFor(type).apiNameFor(type);
       return this._hydrate(
         type,
-        result[Ember.String.underscore(apiName)],
+        result[underscore(apiName)],
         result
       );
     }
@@ -154,7 +156,7 @@ export default EmberObject.extend({
   refreshResults(resultSet, type, url) {
     const adapter = this.adapterFor(type);
     return ajax(url).then(result => {
-      const typeName = Ember.String.underscore(
+      const typeName = underscore(
         this.pluralize(adapter.apiNameFor(type))
       );
       const content = result[typeName].map(obj =>
@@ -167,7 +169,7 @@ export default EmberObject.extend({
   appendResults(resultSet, type, url) {
     const adapter = this.adapterFor(type);
     return ajax(url).then(result => {
-      const typeName = Ember.String.underscore(
+      const typeName = underscore(
         this.pluralize(adapter.apiNameFor(type))
       );
 
@@ -223,7 +225,7 @@ export default EmberObject.extend({
 
   _resultSet(type, result, findArgs) {
     const adapter = this.adapterFor(type);
-    const typeName = Ember.String.underscore(
+    const typeName = underscore(
       this.pluralize(adapter.apiNameFor(type))
     );
     const content = result[typeName].map(obj =>
@@ -327,7 +329,7 @@ export default EmberObject.extend({
             obj[subType] = hydrated;
             delete obj[k];
           } else {
-            Ember.set(obj, subType, null);
+            set(obj, subType, null);
           }
         }
       }

app/assets/javascripts/discourse/widgets/component-connector.js.es6

@@ -1,4 +1,6 @@
 import { next } from "@ember/runloop";
+import { setOwner, getOwner } from '@ember/application';
+
 export default class ComponentConnector {
   constructor(widget, componentName, opts, trackedProperties) {
     this.widget = widget;
@@ -27,8 +29,8 @@ export default class ComponentConnector {
         view._compute();
       }
 
-      if (Ember.setOwner) {
+      if (setOwner) {
-        Ember.setOwner(view, Ember.getOwner(mounted));
+        setOwner(view, getOwner(mounted));
       }
 
       mounted._connected.push(view);

app/assets/javascripts/discourse/widgets/connector.js.es6

@@ -1,5 +1,6 @@
 import { next } from "@ember/runloop";
 import deprecated from "discourse-common/lib/deprecated";
+import { setOwner, getOwner } from "@ember/application";
 
 export default class Connector {
   constructor(widget, opts) {
@@ -52,8 +53,8 @@ export default class Connector {
       }
 
       if (view) {
-        if (Ember.setOwner) {
+        if (setOwner) {
-          Ember.setOwner(view, Ember.getOwner(mounted));
+          setOwner(view, getOwner(mounted));
         }
         mounted._connected.push(view);
         view.renderer.appendTo(view, $elem[0]);

app/assets/javascripts/select-kit/components/composer-actions.js.es6

@@ -7,6 +7,8 @@ import {
   REPLY,
   EDIT
 } from "discourse/models/composer";
+import { camelize } from "@ember/string";
+import { empty } from "@ember/object/computed";
 
 // Component can get destroyed and lose state
 let _topicSnapshot = null;
@@ -26,7 +28,7 @@ export default DropdownSelectBoxComponent.extend({
   allowInitialValueMutation: false,
   allowAutoSelectFirst: false,
   showFullTitle: false,
-  isHidden: Ember.computed.empty("content"),
+  isHidden: empty("content"),
 
   didReceiveAttrs() {
     this._super(...arguments);
@@ -292,7 +294,7 @@ export default DropdownSelectBoxComponent.extend({
 
   actions: {
     onSelect(value) {
-      let action = `${Ember.String.camelize(value)}Selected`;
+      let action = `${camelize(value)}Selected`;
       if (this[action]) {
         let model = this.composerModel;
         this[action](

app/assets/javascripts/wizard/components/wizard-field-image.js.es6

@@ -3,6 +3,7 @@ import getUrl from "discourse-common/lib/get-url";
 import computed from "ember-addons/ember-computed-decorators";
 import { getToken } from "wizard/lib/ajax";
 import { getOwner } from "discourse-common/lib/get-owner";
+import { dasherize } from "@ember/string";
 
 export default Component.extend({
   classNames: ["wizard-image-row"],
@@ -10,7 +11,7 @@ export default Component.extend({
 
   @computed("field.id")
   previewComponent(id) {
-    const componentName = `image-preview-${Ember.String.dasherize(id)}`;
+    const componentName = `image-preview-${dasherize(id)}`;
     const exists = getOwner(this).lookup(`component:${componentName}`);
     return exists ? componentName : "wizard-image-preview";
   },

app/assets/javascripts/wizard/components/wizard-field.js.es6

@@ -1,19 +1,20 @@
 import Component from "@ember/component";
 import computed from "ember-addons/ember-computed-decorators";
+import { dasherize } from "@ember/string";
 
 export default Component.extend({
   classNameBindings: [":wizard-field", "typeClass", "field.invalid"],
 
   @computed("field.type")
-  typeClass: type => `${Ember.String.dasherize(type)}-field`,
+  typeClass: type => `${dasherize(type)}-field`,
 
   @computed("field.id")
-  fieldClass: id => `field-${Ember.String.dasherize(id)} wizard-focusable`,
+  fieldClass: id => `field-${dasherize(id)} wizard-focusable`,
 
   @computed("field.type", "field.id")
   inputComponentName(type, id) {
     return type === "component"
-      ? Ember.String.dasherize(id)
+      ? dasherize(id)
       : `wizard-field-${type}`;
   }
 });

app/assets/javascripts/wizard/components/wizard-step.js.es6

@@ -5,6 +5,7 @@ import {
   default as computed,
   observes
 } from "ember-addons/ember-computed-decorators";
+import { htmlSafe } from "@ember/template";
 
 jQuery.fn.wiggle = function(times, duration) {
   if (times > 0) {
@@ -89,7 +90,7 @@ export default Component.extend({
       ratio = 1;
     }
 
-    return Ember.String.htmlSafe(`width: ${ratio * 200}px`);
+    return htmlSafe(`width: ${ratio * 200}px`);
   },
 
   autoFocus() {