Skip to content

Commit c0681ed

Browse files
lifeartlifeart
committed
ember-modal-dialog
1 parent 7e1a683 commit c0681ed

File tree

14 files changed

+274
-65
lines changed

14 files changed

+274
-65
lines changed

‎compat/ember-decorators/component.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export {
2+
className,
3+
attribute,
4+
classNames,
5+
classNameBindings,
6+
attributeBindings,
7+
tagName,
8+
} from '@ember-decorators/component';
9+
10+
// noop
11+
export const layout = () => (target) => {
12+
return target;
13+
};

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"ember-cookies": "^1.0.0",
9191
"ember-data": "5.1.1",
9292
"ember-intl": "^5.7.2",
93+
"ember-modal-dialog": "^4.1.2",
9394
"ember-modifier": "^4.0.0",
9495
"ember-notify": "^6.0.4",
9596
"ember-page-title": "^7.0.0",

‎plugins/drop-import-sync.ts

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export function dropImportSync(addons: string[]) {
2+
return function dropImportSyncPlugin(babel) {
3+
const { types: t } = babel;
4+
let cnt = 0;
5+
function keyValue() {
6+
return `_$key${cnt++}`;
7+
}
8+
const shouldContinue = (state) => {
9+
const fName = state.file.opts.filename;
10+
return (
11+
fName.includes('node_modules') &&
12+
addons.some((el) => fName.includes(`/${el}/`))
13+
);
14+
};
15+
16+
return {
17+
name: 'drop-import-sync', // not required
18+
visitor: {
19+
Program: {
20+
exit(path, state) {
21+
if (!shouldContinue(state)) {
22+
return;
23+
}
24+
if (state.importsToAppend) {
25+
state.importsToAppend.forEach((el) => {
26+
path.node.body.unshift(el);
27+
});
28+
path.node.body.push(
29+
t.functionDeclaration(
30+
t.identifier('_$importSync'),
31+
[t.identifier('_$a')],
32+
t.blockStatement([t.returnStatement(t.identifier('_$a'))])
33+
)
34+
);
35+
}
36+
},
37+
},
38+
ImportDeclaration(path, state) {
39+
if (!shouldContinue(state)) {
40+
return;
41+
}
42+
if (path.node.source.value === '@embroider/macros') {
43+
path.node.specifiers = path.node.specifiers.filter((el) => {
44+
return el.imported.name !== 'importSync';
45+
});
46+
if (path.node.specifiers.length === 0) {
47+
path.remove();
48+
}
49+
}
50+
},
51+
CallExpression(path, state) {
52+
if (!shouldContinue(state)) {
53+
return;
54+
}
55+
if (path.node.callee && path.node.callee.name === 'importSync') {
56+
path.node.callee.name = '_$importSync';
57+
state.importsToAppend = state.importsToAppend || [];
58+
const literalName = keyValue();
59+
state.importsToAppend.push(
60+
t.importDeclaration(
61+
[t.importNamespaceSpecifier(t.identifier(literalName))],
62+
t.stringLiteral(path.node.arguments[0].value)
63+
)
64+
);
65+
path.node.arguments[0] = t.identifier(literalName);
66+
}
67+
},
68+
},
69+
};
70+
};
71+
}

‎plugins/remove-legacy-layout.js

-56
This file was deleted.

‎plugins/remove-legacy-layout.ts

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
export function removeLegacyLayout(babel) {
2+
const shouldContinue = (state) => {
3+
const fName = state.file.opts.filename;
4+
return (
5+
fName.includes('node_modules') &&
6+
(fName.includes('addon') || fName.includes('app'))
7+
);
8+
};
9+
const { types: t } = babel;
10+
return {
11+
name: 'remove-layout',
12+
visitor: {
13+
Program: {
14+
exit(path, state) {
15+
if (state.shouldAppendLayout) {
16+
path.node.body.push(
17+
t.variableDeclaration('var', [
18+
t.variableDeclarator(
19+
t.identifier('layout'),
20+
t.stringLiteral('')
21+
),
22+
])
23+
);
24+
}
25+
},
26+
},
27+
ImportDeclaration(path, state) {
28+
if (!shouldContinue(state)) {
29+
return;
30+
}
31+
if (path.node.source.value.endsWith('/config/environment')) {
32+
path.node.source.value = '@/config/env';
33+
}
34+
if (path.node.source.value === '@ember-decorators/component') {
35+
// path.node.specifiers = path.node.specifiers.filter((el) => {
36+
// return el.imported.name !== 'layout';
37+
// });
38+
// if (!path.node.specifiers.length) {
39+
// path.remove();
40+
// }
41+
path.node.source.value = 'compat-ember-decorators/component';
42+
} else if (path.node.source.value.includes('/templates/')) {
43+
path.remove();
44+
// add `layout` variable to programm
45+
state.shouldAppendLayout = true;
46+
}
47+
},
48+
ObjectProperty(path, state) {
49+
if (!shouldContinue(state)) {
50+
return;
51+
}
52+
if (
53+
path.node.value.name === 'layout' &&
54+
path.node.key.name === 'layout'
55+
) {
56+
path.remove();
57+
}
58+
},
59+
ClassProperty(path, state) {
60+
if (!shouldContinue(state)) {
61+
return;
62+
}
63+
if (
64+
path.node.value &&
65+
path.node.value.name === 'layout' &&
66+
path.node.key &&
67+
path.node.key.name === 'layout'
68+
) {
69+
path.remove();
70+
}
71+
},
72+
// Decorator(path, state) {
73+
// if (!shouldContinue(state)) {
74+
// return;
75+
// }
76+
// if (path.node.expression && path.node.expression.callee) {
77+
// if (
78+
// path.node.expression.callee.name === 'templateLayout' ||
79+
// path.node.expression.callee.name === 'layout'
80+
// ) {
81+
// path.remove();
82+
// } else {
83+
// console.log(path.node.expression.callee.name);
84+
// }
85+
// }
86+
// },
87+
},
88+
};
89+
}

‎readme.md

+1
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ yarn dev
9090
1. `ember-page-title`
9191
1. `ember-notify`
9292
1. `ember-ref-bucket`
93+
1. `ember-modal-dialog`
9394

9495
[(see code for samples)](https://github.com/lifeart/demo-ember-vite/tree/master/src/addons)
9596

‎src/addons/ember-modal-dialog.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { setComponentTemplate } from '@glimmer/manager';
2+
import ModalDialogComponent from 'ember-modal-dialog/components/modal-dialog.js';
3+
import ModalDialogTemplate from 'ember-modal-dialog/templates/components/modal-dialog.hbs';
4+
import ModalDialogService from 'ember-modal-dialog/app/services/modal-dialog.js';
5+
6+
import ModalDialogBasicDialogComponent from 'ember-modal-dialog/components/basic-dialog.js';
7+
import ModalDialogBasicDialogTemplate from 'ember-modal-dialog/templates/components/basic-dialog.hbs';
8+
9+
import EmberWormholeComponent from 'ember-wormhole/addon/components/ember-wormhole.js';
10+
import EmberWormholeTemplate from 'ember-wormhole/addon/templates/components/ember-wormhole.hbs';
11+
12+
import IgnoreChildren from 'ember-modal-dialog/helpers/ignore-children.js';
13+
14+
import PositionedContainerComponent from 'ember-modal-dialog/components/positioned-container.js';
15+
16+
import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-appearance.css';
17+
import 'ember-modal-dialog/app/styles/ember-modal-dialog/ember-modal-structure.css';
18+
19+
setComponentTemplate(
20+
ModalDialogBasicDialogTemplate,
21+
ModalDialogBasicDialogComponent
22+
);
23+
24+
const registry = {
25+
'component:modal-dialog': setComponentTemplate(
26+
ModalDialogTemplate,
27+
ModalDialogComponent
28+
),
29+
'component:ember-wormhole': setComponentTemplate(
30+
EmberWormholeTemplate,
31+
EmberWormholeComponent
32+
),
33+
'component:ember-modal-dialog-positioned-container':
34+
PositionedContainerComponent,
35+
'service:modal-dialog': ModalDialogService,
36+
'helper:ignore-children': IgnoreChildren,
37+
};
38+
39+
export default registry;

‎src/addons/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import EmberIntl from './ember-intl';
1010
import EmberPageTitle from './ember-page-title';
1111
import EmberData from './ember-data';
1212
import EmberNotify from './ember-notify';
13+
import EmberModalDialog from './ember-modal-dialog';
1314

1415
const registry = {
1516
...EmberSimpleAuthRegistry,
@@ -24,6 +25,7 @@ const registry = {
2425
...EmberPageTitle,
2526
...EmberData,
2627
...EmberNotify,
28+
...EmberModalDialog,
2729
};
2830

2931
export default registry;

‎src/config/initializer.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import registry from './registry';
33
import type ApplicationClass from '@ember/application';
44
import type RouteClass from './router';
55
import { default as initializer } from '../initializers/logger';
6-
import { default as instanceInitializer } from '../instance-initializers/logger';
6+
import { default as logger } from '../instance-initializers/logger';
7+
import { default as modalDialog } from '../instance-initializers/ember-modal-dialog';
78
import { default as emberDataInitializer } from '../initializers/ember-data';
89

910
export function init(
@@ -15,7 +16,8 @@ export function init(
1516
Application.initializer(emberDataInitializer);
1617

1718
// Init instance initializers
18-
Application.instanceInitializer(instanceInitializer);
19+
Application.instanceInitializer(logger);
20+
Application.instanceInitializer(modalDialog);
1921

2022
const app = Application.create({
2123
name: ENV.modulePrefix,

‎src/controllers/application.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import Controller from '@ember/controller';
22
import { service } from '@ember/service';
33
import type SessionService from 'ember-simple-auth/addon/services/session';
4-
import type EmberNotify from 'ember-notify'
4+
import type EmberNotify from 'ember-notify';
5+
import { tracked } from '@glimmer/tracking';
56
export class ApplicationController extends Controller {
67
@service session: SessionService;
78
@service notify: EmberNotify;
9+
@tracked showModal = true;
10+
11+
closeModal = () => {
12+
this.showModal = false;
13+
};
814

915
constructor(...args: ConstructorParameters<typeof Controller>) {
1016
super(...args);

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import initialize from 'ember-modal-dialog/instance-initializers/add-modals-container.js';
2+
3+
export default {
4+
name: 'add-modals-container',
5+
initialize,
6+
};

‎src/templates/application.hbs

+5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<Header @session={{this.session}} />
22
<EmberNotify />
3+
{{#if this.showModal}}
4+
<ModalDialog>
5+
Ember Modal Dialog test <Button {{on 'click' this.closeModal}}>Close</Button>
6+
</ModalDialog>
7+
{{/if}}
38

49
<div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-8'>
510
<div class='mx-auto max-w-3xl'>

0 commit comments

Comments
 (0)