@ember-eui/core 2.0.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ### Master
 
+### 3.0.0
+💥 Breaking change
+`@ember-eui/*`
+- Drops support for ember-source < v3.20.0
+- Drops support for node 10
+- Drops support for importing sass, elastic eui is migrating to emotion, so its better we just focus on that instead of sass, so we no longer dynamically import template only components for now, this could possibly be achieved later post embroider
+
+🏠 Internal
+`@ember-eui/*`
+- `ember-cli-update --to=3.28.0` on all packages
+- Update ember-cli-typescript
+- Remove some deprecations like new imports paths and helpers usage and `#with` helper
+
+### 2.0.0
+💥 Breaking change
+`@ember-eui/core`
+- Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
+
 ### 1.6.3
 🐛 Bug / Fixes
 `@ember-eui/core`

package/README.md

@@ -1,7 +1,6 @@
 # ember-eui
 
 This project aims to provide ember components implementing the css layer of https://elastic.github.io/eui
-
 ### Icons
 
 For icons to work you will need to:
@@ -27,11 +26,13 @@ var app = new EmberApp(defaults, {
 
 ## Compatibility
 
-- Ember.js v3.12 or above
-- Ember CLI v2.13 or above
-- Node.js v10 or above
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
+* Node.js v12 or above
+
 
-## Installation
+Installation
+------------------------------------------------------------------------------
 
 ```
 ember install @ember-eui/core

package/addon/components/eui-badge/index.hbs

@@ -67,7 +67,7 @@
     }}
   >
     <span class="euiBadge__content">
-      {{#if hasBlock}}
+      {{#if (has-block)}}
         {{#if @onClick}}
           <button
             class="euiBadge__childButton"
@@ -101,14 +101,14 @@
             class={{class-names "euiBadge__icon" @closeButtonProps.iconClasses}}
             @type={{@iconType}}
             data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
-            @size={{if hasBlock "s" "m"}}
+            @size={{if (has-block) "s" "m"}}
           />
         </button>
         {{! tempalte-lint-enable}}
       {{else}}
         <EuiIcon
           @type={{@iconType}}
-          @size={{if hasBlock "s" "m"}}
+          @size={{if (has-block) "s" "m"}}
           class="euiBadge__icon"
         />
       {{/if}}

package/addon/components/eui-card/eui-card-select/index.hbs

@@ -17,7 +17,7 @@
   aria-checked={{@isSelected}}
   ...attributes
 >
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else if @isSelected}}
     Selected

package/addon/components/eui-card/index.hbs

@@ -9,7 +9,7 @@
       (if (eq @layout "horizontal") "euiCard--horizontal")
       (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
       (if @isDisabled "euiCard-isDisabled")
-      (if hasBlock "euiCard--hasChildren")
+      (if (has-block) "euiCard--hasChildren")
       (if @icon "euiCard--hasIcon" (if has-block "icon" "euiCard--hasIcon"))
       (if @betaBadgeLabel "euiCard--hasBetaBadge")
       (if

package/addon/components/eui-combo-box/create-option/index.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { isHTMLSafe, htmlSafe } from '@ember/string';
+import { isHTMLSafe, htmlSafe } from '@ember/template';
 import { get } from '@ember/object';
 
 type EuiComboBoxCreateOptionArgs = {

package/addon/components/eui-icon/index.ts

@@ -90,6 +90,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   get useSvg(): boolean {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     return (
       this.args.useSvg ??

package/addon/components/eui-image/index.ts

@@ -1,6 +1,6 @@
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { sizeMapping } from '../../utils/css-mappings/eui-image';

package/addon/components/eui-markdown-editor-footer/index.ts

@@ -9,6 +9,7 @@ export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkd
   @tracked isShowingHelp = false;
 
   get svgPath() {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -30,6 +30,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
   ];
 
   get svgPath() {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;

package/addon/components/eui-tabbed-content/index.hbs

@@ -1,17 +1,21 @@
 {{#let
   (unique-id)
   (optional @onTabClick)
-  (arg-or-default @autoFocus "initial")
+  (arg-or-default @autoFocus 'initial')
   (use-state
-    (get-tab-id (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs)))
-  ) as |id onTabClick autoFocus selectedTab|
+    (get-tab-id
+      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
+    )
+  )
+  as |id onTabClick autoFocus selectedTab|
 }}
   <div class={{@className}} ...attributes>
     <EuiTabs
       @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
-      @size={{@size}} as |EuiTab|
+      @size={{@size}}
+      as |EuiTab|
     >
       {{#each @tabs as |tab|}}
         <EuiTab
@@ -26,14 +30,16 @@
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#with (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-        {{#if (has-block "selectedTabContent")}}
-          {{yield currentTab to="selectedTabContent"}}
-        {{else}}
-          {{currentTab.content}}
-        {{/if}}
-      </div>
-    {{/with}}
+    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
+      {{#if currentTab}}
+        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
+          {{#if (has-block "selectedTabContent")}}
+            {{yield currentTab to="selectedTabContent"}}
+          {{else}}
+            {{currentTab.content}}
+          {{/if}}
+        </div>
+      {{/if}}
+    {{/let}}
   </div>
 {{/let}}

package/addon/helpers/class-names.ts

@@ -66,4 +66,6 @@ export function classNames(
   return str;
 }
 
-export default helper(classNames);
+export default helper<string[], Options & { addBase: boolean }, string>(
+  classNames
+);

package/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

package/docs/display/icons-demo/demo1.md

@@ -1,16 +1,6 @@
 # Demo
 
 ```hbs template
-<EuiText style='cursor: pointer;' {{on 'mousemove' this.update}}>
-  You can hover on the icon below, open the network tab, all svgs are loaded on
-  demand!
-  <EuiIcon @type={{this.icon}} />
-  <EuiIcon @type={{this.icon}} @size='m' />
-  <EuiIcon @type={{this.icon}} @size='l' />
-  <EuiIcon @type={{this.icon}} @size='xl' />
-  <EuiIcon @type={{this.icon}} @size='xxl' />
-</EuiText>
-<br />
 <EuiIcon @type='logoGolang' />
 <EuiIcon @type='logoGolang' @size='m' />
 <EuiIcon @type='logoGolang' @size='l' />

package/index.js

@@ -1,10 +1,4 @@
 'use strict';
-const path = require('path');
-const resolve = require('resolve');
-const BroccoliMergeTrees = require('broccoli-merge-trees');
-const writeFile = require('broccoli-file-creator');
-const Funnel = require('broccoli-funnel');
-const EuiScssFilter = require('./lib/elastic-eui-scss-filter');
 
 module.exports = {
   name: require('./package').name,
@@ -53,14 +47,12 @@ module.exports = {
       ? this.emberEuiOptions.theme
       : 'light';
 
-    if (this.emberEuiOptions.useCompiledCss !== false) {
-      if (this.emberEuiOptions.theme) {
-        app.import(
-          `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
-        );
-      } else {
-        app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
-      }
+    if (this.emberEuiOptions.theme) {
+      app.import(
+        `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
+      );
+    } else {
+      app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
     }
 
     this._super.included.apply(this, arguments);
@@ -71,47 +63,5 @@ module.exports = {
       (a) => a.name === 'ember-power-select'
     );
     return emberPowerSelect.contentFor(type, config);
-  },
-
-  // TODO: Currently the performance of recompiling sass on every change are serious, find a way to improve them.
-  treeForStyles(tree) {
-    let trees = [];
-    let euiScssFiles;
-
-    if (this.emberEuiOptions.useCompiledCss === false) {
-      euiScssFiles = new Funnel(this.pathBase('@elastic/eui'), {
-        srcDir: '/src',
-        include: ['**/*.scss'],
-        destDir: 'elastic-eui',
-        annotation: 'ElasticEUIScssFunnel'
-      });
-
-      euiScssFiles = new EuiScssFilter(euiScssFiles);
-
-      trees.push(euiScssFiles);
-    }
-
-    let selectedTheme = this.emberEuiOptions.theme;
-
-    let importer = writeFile(
-      'ember-eui-components.scss',
-      euiScssFiles ? `@import './elastic-eui/theme_${selectedTheme}.scss';` : ''
-    );
-
-    trees.push(importer);
-
-    trees.push(tree);
-
-    let output = new BroccoliMergeTrees(trees, {
-      overwrite: true
-    });
-
-    return this._super.treeForStyles(output);
-  },
-
-  pathBase(packageName) {
-    return path.dirname(
-      resolve.sync(`${packageName}/package.json`, { basedir: __dirname })
-    );
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -26,11 +26,14 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint:* test:*",
+    "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepack": "ember ts:precompile",
@@ -49,34 +52,30 @@
   },
   "dependencies": {
     "@elastic/eui": "31.0.0",
-    "@ember/render-modifiers": "^1.0.2",
-    "@html-next/vertical-collection": "^2.0.0",
+    "@ember/render-modifiers": "^2.0.4",
+    "@html-next/vertical-collection": "^2.1.0",
     "@types/lodash-es": "^4.17.4",
-    "broccoli-file-creator": "^2.1.1",
-    "broccoli-filter": "^1.3.0",
-    "broccoli-funnel": "^2.0.1",
-    "broccoli-merge-trees": "^4.2.0",
     "chroma-js": "^2.1.0",
-    "ember-auto-import": "^1.6.0",
+    "ember-auto-import": "^1.11.3",
     "ember-cached-decorator-polyfill": "^0.1.1",
-    "ember-cli-babel": "^7.21.0",
-    "ember-cli-htmlbars": "^5.3.2",
-    "ember-cli-typescript": "^4.1.0",
+    "ember-cli-babel": "^7.26.6",
+    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.5.0",
-    "ember-focus-trap": "^0.4.0",
+    "ember-element-helper": "^0.5.5",
+    "ember-focus-trap": "^0.7.0",
     "ember-href-to": "^4.1.0",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^6.0.2",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^2.1.1",
+    "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.3",
     "ember-power-select": "^5.0.2",
     "ember-set-body-class": "^1.0.2",
-    "ember-set-helper": "^2.0.0",
+    "ember-set-helper": "^2.0.1",
     "ember-style-modifier": "^0.6.0",
     "ember-svg-jar": "^2.3.4",
-    "ember-truth-helpers": "^2.1.0",
+    "ember-truth-helpers": "^3.0.0",
     "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -93,57 +92,76 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "^1.3.0",
-    "@glimmer/component": "^1.0.1",
-    "@glimmer/tracking": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.0.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@types/ember": "^3.16.0",
-    "@types/ember-qunit": "^3.4.9",
-    "@types/ember-resolver": "^5.0.9",
-    "@types/ember__test-helpers": "^1.7.2",
-    "@types/qunit": "^2.9.1",
+    "@types/ember-qunit": "^5.0.0",
+    "@types/ember-resolver": "^5.0.11",
+    "@types/ember__application": "^4.0.0",
+    "@types/ember__array": "^4.0.1",
+    "@types/ember__component": "^4.0.4",
+    "@types/ember__controller": "^4.0.0",
+    "@types/ember__debug": "^4.0.0",
+    "@types/ember__engine": "^4.0.0",
+    "@types/ember__error": "^4.0.0",
+    "@types/ember__object": "^4.0.0",
+    "@types/ember__polyfills": "^4.0.0",
+    "@types/ember__routing": "^4.0.3",
+    "@types/ember__runloop": "^4.0.0",
+    "@types/ember__service": "^4.0.0",
+    "@types/ember__string": "^3.0.9",
+    "@types/ember__template": "^4.0.0",
+    "@types/ember__test": "^4.0.0",
+    "@types/ember__test-helpers": "^2.6.1",
+    "@types/ember__utils": "^4.0.0",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
+    "@types/qunit": "^2.11.3",
+    "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.20.0",
+    "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-netlify": "^0.4.1",
-    "ember-cli-postcss": "^7.0.0",
-    "ember-cli-resolve-asset": "^0.3.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-string-helpers": "^5.0.0",
+    "ember-cli-string-helpers": "^6.1.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-element-helper": "^0.3.1",
     "ember-export-application-global": "^2.0.1",
-    "ember-get-config": "^0.3.0",
-    "ember-load-initializers": "^2.1.1",
+    "ember-get-config": "~1.0.2",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-modifier": "^2.1.1",
-    "ember-qunit": "^4.6.0",
-    "ember-resolver": "^8.0.0",
-    "ember-source": "~3.20.2",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-string-helpers": "^1.0.2",
-    "ember-template-lint": "^2.9.1",
+    "ember-page-title": "^6.2.2",
+    "ember-qunit": "^5.1.4",
+    "ember-resolver": "^8.0.2",
+    "ember-source": "~3.28.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.6.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-ember": "^8.9.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "qunit-dom": "^1.2.0",
-    "typescript": "^4.0.3"
+    "prettier": "^2.3.2",
+    "qunit": "^2.16.0",
+    "qunit-dom": "^1.6.0",
+    "typescript": "^4.5.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">= 12"
+    "node": "12.* || 14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
@@ -154,5 +172,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "a225f53d9f2212e3eb5ab0c28daeabc5624031ab"
+  "gitHead": "24ca3b05bb2ffb838ab452bb5b2a9794fd8a993f"
 }

package/.prettierignore

@@ -1,20 +0,0 @@
-# unconventional js
-vendor/
-public/
-
-# compiled output
-dist/
-tmp/
-
-# dependencies
-node_modules/
-
-# ember-try
-.node_modules.ember-try/
-bower.json.ember-try
-package.json.ember-try
-
-package.json
-
-*.html
-*.js

package/lib/elastic-eui-scss-filter.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const Filter = require('broccoli-filter');
-
-module.exports = class EuiScssFilter extends Filter {
-  constructor(inputNode) {
-    super(inputNode, { annotation: 'EuiScssFilter' });
-
-    this.extensions = ['scss'];
-    this.targetExtension = 'scss';
-  }
-
-  processString(content) {
-    return content.replace("@import '../packages/index';", '');
-  }
-};