ember-modal-dialog

compat/ember-decorators/component.ts

@@ -0,0 +1,13 @@
+export {
+  className,
+  attribute,
+  classNames,
+  classNameBindings,
+  attributeBindings,
+  tagName,
+} from '@ember-decorators/component';
+
+// noop
+export const layout = () => (target) => {
+  return target;
+};

package.json

@@ -90,6 +90,7 @@
     "ember-cookies": "^1.0.0",
     "ember-data": "5.1.1",
     "ember-intl": "^5.7.2",
+    "ember-modal-dialog": "^4.1.2",
     "ember-modifier": "^4.0.0",
     "ember-notify": "^6.0.4",
     "ember-page-title": "^7.0.0",

plugins/drop-import-sync.ts

@@ -0,0 +1,71 @@
+export function dropImportSync(addons: string[]) {
+  return function dropImportSyncPlugin(babel) {
+    const { types: t } = babel;
+    let cnt = 0;
+    function keyValue() {
+      return `_$key${cnt++}`;
+    }
+    const shouldContinue = (state) => {
+      const fName = state.file.opts.filename;
+      return (
+        fName.includes('node_modules') &&
+        addons.some((el) => fName.includes(`/${el}/`))
+      );
+    };
+
+    return {
+      name: 'drop-import-sync', // not required
+      visitor: {
+        Program: {
+          exit(path, state) {
+            if (!shouldContinue(state)) {
+              return;
+            }
+            if (state.importsToAppend) {
+              state.importsToAppend.forEach((el) => {
+                path.node.body.unshift(el);
+              });
+              path.node.body.push(
+                t.functionDeclaration(
+                  t.identifier('_$importSync'),
+                  [t.identifier('_$a')],
+                  t.blockStatement([t.returnStatement(t.identifier('_$a'))])
+                )
+              );
+            }
+          },
+        },
+        ImportDeclaration(path, state) {
+          if (!shouldContinue(state)) {
+            return;
+          }
+          if (path.node.source.value === '@embroider/macros') {
+            path.node.specifiers = path.node.specifiers.filter((el) => {
+              return el.imported.name !== 'importSync';
+            });
+            if (path.node.specifiers.length === 0) {
+              path.remove();
+            }
+          }
+        },
+        CallExpression(path, state) {
+          if (!shouldContinue(state)) {
+            return;
+          }
+          if (path.node.callee && path.node.callee.name === 'importSync') {
+            path.node.callee.name = '_$importSync';
+            state.importsToAppend = state.importsToAppend || [];
+            const literalName = keyValue();
+            state.importsToAppend.push(
+              t.importDeclaration(
+                [t.importNamespaceSpecifier(t.identifier(literalName))],
+                t.stringLiteral(path.node.arguments[0].value)
+              )
+            );
+            path.node.arguments[0] = t.identifier(literalName);
+          }
+        },
+      },
+    };
+  };
+}

plugins/remove-legacy-layout.ts

@@ -0,0 +1,92 @@
+export function removeLegacyLayout(addons: string[]) {
+  return function removeLegacyLayoutPlugin (babel) {
+    const shouldContinue = (state) => {
+      const fName = state.file.opts.filename;
+      return (
+        fName.includes('node_modules') &&
+        addons.some((el) => fName.includes(`/${el}/`))
+      );
+    };
+    const { types: t } = babel;
+    return {
+      name: 'remove-layout',
+      visitor: {
+        Program: {
+          exit(path, state) {
+            if (state.shouldAppendLayout) {
+              path.node.body.push(
+                t.variableDeclaration('var', [
+                  t.variableDeclarator(
+                    t.identifier('layout'),
+                    t.stringLiteral('')
+                  ),
+                ])
+              );
+            }
+          },
+        },
+        ImportDeclaration(path, state) {
+          if (!shouldContinue(state)) {
+            return;
+          }
+          if (path.node.source.value.endsWith('/config/environment')) {
+            path.node.source.value = '@/config/env';
+          }
+          if (path.node.source.value === '@ember-decorators/component') {
+            //   path.node.specifiers = path.node.specifiers.filter((el) => {
+            //     return el.imported.name !== 'layout';
+            //   });
+            //   if (!path.node.specifiers.length) {
+            //     path.remove();
+            //   }
+            path.node.source.value = 'compat-ember-decorators/component';
+          } else if (path.node.source.value.includes('/templates/')) {
+            path.remove();
+            // add `layout` variable to programm
+            state.shouldAppendLayout = true;
+          }
+        },
+        ObjectProperty(path, state) {
+          if (!shouldContinue(state)) {
+            return;
+          }
+          if (
+            path.node.value.name === 'layout' &&
+            path.node.key.name === 'layout'
+          ) {
+            path.remove();
+          }
+        },
+        ClassProperty(path, state) {
+          if (!shouldContinue(state)) {
+            return;
+          }
+          if (
+            path.node.value &&
+            path.node.value.name === 'layout' &&
+            path.node.key &&
+            path.node.key.name === 'layout'
+          ) {
+            path.remove();
+          }
+        },
+        //   Decorator(path, state) {
+        //     if (!shouldContinue(state)) {
+        //       return;
+        //     }
+        //     if (path.node.expression && path.node.expression.callee) {
+        //       if (
+        //         path.node.expression.callee.name === 'templateLayout' ||
+        //         path.node.expression.callee.name === 'layout'
+        //       ) {
+        //         path.remove();
+        //       } else {
+        //         console.log(path.node.expression.callee.name);
+        //       }
+        //     }
+        //   },
+      },
+    };
+  }
+
+}

readme.md

@@ -90,6 +90,7 @@ yarn dev
 1. `ember-page-title`
 1. `ember-notify`
 1. `ember-ref-bucket`
+1. `ember-modal-dialog`
 
 [(see code for samples)](https://github.com/lifeart/demo-ember-vite/tree/master/src/addons)
 

src/addons/ember-modal-dialog.ts

@@ -0,0 +1,39 @@
+import { setComponentTemplate } from '@glimmer/manager';
+import ModalDialogComponent from 'ember-modal-dialog/components/modal-dialog.js';
+import ModalDialogTemplate from 'ember-modal-dialog/templates/components/modal-dialog.hbs';
+import ModalDialogService from 'ember-modal-dialog/app/services/modal-dialog.js';
+
+import ModalDialogBasicDialogComponent from 'ember-modal-dialog/components/basic-dialog.js';
+import ModalDialogBasicDialogTemplate from 'ember-modal-dialog/templates/components/basic-dialog.hbs';
+
+import EmberWormholeComponent from 'ember-wormhole/addon/components/ember-wormhole.js';
+import EmberWormholeTemplate from 'ember-wormhole/addon/templates/components/ember-wormhole.hbs';
+
+import IgnoreChildren from 'ember-modal-dialog/helpers/ignore-children.js';
+
+import PositionedContainerComponent from 'ember-modal-dialog/components/positioned-container.js';
+
+import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-appearance.css';
+import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-structure.css';
+
+setComponentTemplate(
+  ModalDialogBasicDialogTemplate,
+  ModalDialogBasicDialogComponent
+);
+
+const registry = {
+  'component:modal-dialog': setComponentTemplate(
+    ModalDialogTemplate,
+    ModalDialogComponent
+  ),
+  'component:ember-wormhole': setComponentTemplate(
+    EmberWormholeTemplate,
+    EmberWormholeComponent
+  ),
+  'component:ember-modal-dialog-positioned-container':
+    PositionedContainerComponent,
+  'service:modal-dialog': ModalDialogService,
+  'helper:ignore-children': IgnoreChildren,
+};
+
+export default registry;

src/addons/index.ts

@@ -10,6 +10,7 @@ import EmberIntl from './ember-intl';
 import EmberPageTitle from './ember-page-title';
 import EmberData from './ember-data';
 import EmberNotify from './ember-notify';
+import EmberModalDialog from './ember-modal-dialog';
 
 const registry = {
   ...EmberSimpleAuthRegistry,
@@ -24,6 +25,7 @@ const registry = {
   ...EmberPageTitle,
   ...EmberData,
   ...EmberNotify,
+  ...EmberModalDialog,
 };
 
 export default registry;

src/config/initializer.ts

@@ -3,7 +3,8 @@ import registry from './registry';
 import type ApplicationClass from '@ember/application';
 import type RouteClass from './router';
 import { default as initializer } from '../initializers/logger';
-import { default as instanceInitializer } from '../instance-initializers/logger';
+import { default as logger } from '../instance-initializers/logger';
+import { default as modalDialog } from '../instance-initializers/ember-modal-dialog';
 import { default as emberDataInitializer } from '../initializers/ember-data';
 
 export function init(
@@ -15,7 +16,8 @@ export function init(
   Application.initializer(emberDataInitializer);
 
   // Init instance initializers
-  Application.instanceInitializer(instanceInitializer);
+  Application.instanceInitializer(logger);
+  Application.instanceInitializer(modalDialog);
 
   const app = Application.create({
     name: ENV.modulePrefix,

src/controllers/application.ts

@@ -1,10 +1,16 @@
 import Controller from '@ember/controller';
 import { service } from '@ember/service';
 import type SessionService from 'ember-simple-auth/addon/services/session';
-import type EmberNotify from 'ember-notify'
+import type EmberNotify from 'ember-notify';
+import { tracked } from '@glimmer/tracking';
 export class ApplicationController extends Controller {
   @service session: SessionService;
   @service notify: EmberNotify;
+  @tracked showModal = true;
+
+  closeModal = () => {
+    this.showModal = false;
+  };
 
   constructor(...args: ConstructorParameters<typeof Controller>) {
     super(...args);

src/instance-initializers/ember-modal-dialog.ts

@@ -0,0 +1,10 @@
+import initialize from 'ember-modal-dialog/instance-initializers/add-modals-container.js';
+import type ApplicationInstance from '@ember/application/instance';
+
+export default {
+  name: 'add-modals-container',
+  initialize: function (application: ApplicationInstance) {
+    console.log('instance initializer init');
+    initialize(application);
+  },
+};

src/templates/application.hbs

@@ -1,5 +1,10 @@
 <Header @session={{this.session}} />
 <EmberNotify />
+{{#if this.showModal}}
+<ModalDialog>
+  Ember Modal Dialog test <Button {{on 'click' this.closeModal}}>Close</Button>
+</ModalDialog>
+{{/if}}
 
 <div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8'>
   <div class='mx-auto max-w-3xl'>