MIGRATE ember to new "import { hbs } from 'ember-cli-htmlbars'" (#9633)

MIGRATE ember to new "import { hbs } from 'ember-cli-htmlbars'"

Author: ndelangen

.gitignore

@@ -35,3 +35,4 @@ storybook-out
 built-storybooks
 cypress/videos
 cypress/screenshots
+examples/ember-cli/ember-output

addons/docs/ember/README.md

@@ -91,7 +91,7 @@ Finally, you can create MDX files like this:
 
 ```md
 import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
-import hbs from 'htmlbars-inline-precompile'
+import { hbs } from 'ember-cli-htmlbars';
 
 <Meta title='App Component' component='AppComponent' />
 

addons/knobs/README.md

@@ -133,7 +133,7 @@ export const withKnobs = () => ({
 ### With Ember
 ```js
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'StoryBook with Knobs',

app/ember/package.json

@@ -30,7 +30,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@ember/test-helpers": "^1.5.0",
+    "@ember/test-helpers": "^1.7.0",
     "@storybook/core": "5.3.9",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -39,9 +39,8 @@
   },
   "peerDependencies": {
     "babel-loader": "^7.0.0 || ^8.0.0",
-    "babel-plugin-ember-modules-api-polyfill": "^2.4.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
-    "ember-source": "^3.4.0"
+    "babel-plugin-ember-modules-api-polyfill": "^2.12.0",
+    "ember-source": "^3.16.0"
   },
   "engines": {
     "node": ">=8.0.0"

app/ember/src/server/framework-preset-babel-ember.js

@@ -4,7 +4,17 @@ export function babel(config) {
   const babelConfigPlugins = config.plugins || [];
 
   const extraPlugins = [
-    [require.resolve('babel-plugin-htmlbars-inline-precompile'), { precompile }],
+    [
+      require.resolve('babel-plugin-htmlbars-inline-precompile'),
+      {
+        precompile,
+        modules: {
+          'ember-cli-htmlbars': 'hbs',
+          'ember-cli-htmlbars-inline-precompile': 'default',
+          'htmlbars-inline-precompile': 'default',
+        },
+      },
+    ],
     [require.resolve('babel-plugin-ember-modules-api-polyfill')],
   ];
 

docs/src/pages/guides/guide-ember/index.md

@@ -73,7 +73,7 @@ Now you can write some stories inside the `../stories/index.stories.js` file, li
 > It is important that you import the `hbs` function that is provided by a babel plugin in `@storybook/ember`
 
 ```js
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default { title: 'Demo' };
 

examples/ember-cli/.eslintrc.js

@@ -8,7 +8,6 @@ module.exports = {
       '@ember/routing/router',
       '@ember/application',
       './config/environment',
-      'htmlbars-inline-precompile',
     ],
   },
 };

examples/ember-cli/.storybook/preview.js

@@ -2,7 +2,7 @@ import { addParameters, addDecorator } from '@storybook/ember';
 import { setJSONDoc } from '@storybook/addon-docs/ember';
 import { withA11y } from '@storybook/addon-a11y';
 // eslint-disable-next-line import/no-unresolved
-import docJson from '../dist/storybook-docgen/index.json';
+import docJson from '../ember-output/storybook-docgen/index.json';
 
 setJSONDoc(docJson);
 addDecorator(withA11y);

examples/ember-cli/config/optional-features.json

@@ -0,0 +1,5 @@
+{
+  "application-template-wrapper": false,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
+}

examples/ember-cli/package.json

@@ -3,18 +3,19 @@
   "version": "5.3.9",
   "private": true,
   "scripts": {
-    "build": "ember build",
-    "prebuild-storybook": "yarn build && shx cp -r public/* dist",
-    "build-storybook": "build-storybook -s dist",
+    "build": "ember build --output-path ember-output",
+    "prebuild-storybook": "yarn build && shx cp -r public/* ember-output",
+    "build-storybook": "build-storybook -s ember-output",
     "dev": "ember serve",
-    "storybook": "yarn build && start-storybook -p 9009 -s dist",
-    "storybook:dev": "yarn dev & start-storybook -p 9009 -s dist"
+    "storybook": "yarn build && start-storybook -p 9009 -s ember-output",
+    "storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
   },
   "dependencies": {
     "ember-template-compiler": "^1.9.0-alpha"
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
+    "@ember/optional-features": "^1.3.0",
     "@storybook/addon-a11y": "5.3.9",
     "@storybook/addon-actions": "5.3.9",
     "@storybook/addon-backgrounds": "5.3.9",
@@ -34,17 +35,16 @@
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^6.0.3",
     "ember-ajax": "^5.0.0",
-    "ember-cli": "~3.14.0",
-    "ember-cli-app-version": "^3.0.0",
-    "ember-cli-babel": "^7.6.0",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
+    "ember-cli": "~3.15.2",
+    "ember-cli-app-version": "^3.2.0",
+    "ember-cli-babel": "^7.13.2",
+    "ember-cli-htmlbars": "^4.2.2",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-load-initializers": "^2.0.0",
-    "ember-resolver": "^5.1.3",
+    "ember-resolver": "^7.0.0",
     "ember-source": "~3.15.0",
     "loader.js": "^4.2.3",
     "webpack": "^4.33.0",

examples/ember-cli/stories/addon-a11y.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { checkA11y } from '@storybook/addon-a11y';
 
 export default {

examples/ember-cli/stories/addon-actions.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {

examples/ember-cli/stories/addon-backgrounds.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/Backgrounds',

examples/ember-cli/stories/addon-centered.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import Centered from '@storybook/addon-centered/ember';
 
 export default {

examples/ember-cli/stories/addon-knobs.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 

examples/ember-cli/stories/addon-links.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { linkTo } from '@storybook/addon-links';
 
 export default {

examples/ember-cli/stories/addon-notes.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Addon/Notes',

examples/ember-cli/stories/index.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 
 export default {
   title: 'Welcome',

examples/ember-cli/stories/welcome-banner.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {

lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { linkTo } from '@storybook/addon-links';
 
 export default {

lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js

@@ -1,4 +1,4 @@
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 
 export default {

lib/cli/test/fixtures/ember-cli/package.json

@@ -29,7 +29,6 @@
     "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-qunit": "^4.3.2",
     "ember-cli-sri": "^2.1.1",