HamedFathi · August 15, 2020 04:37
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
 </head>
 <!--
 Dumber Gist uses dumber bundler, the default bundle file
 is /dist/entry-bundle.js.
 The starting module is pointed to "main" (data-main attribute on script)
 which is your src/main.ts.
 -->
 <body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia": "dev"
  }
 }
diff --git a/src\at-alert.html b/src\at-alert.html
 <div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
 </div>
diff --git a/src\at-alert.ts b/src\at-alert.ts
 import { IBootstrapV5Options } from './BootstrapV5Options';
 import { customElement } from 'aurelia';
 import template from './at-alert.html';

 @customElement({ template, name: 'at-alert' })
 export class BootstrapAlert {
    constructor(@IBootstrapV5Options options: IBootstrapV5Options) {
    }
 } 
diff --git a/src\BootstrapV5Options.ts b/src\BootstrapV5Options.ts
 import { DI, IContainer, Registration } from '@aurelia/kernel';

 export interface IBootstrapV5Options {
    enableRippleEffect?: boolean;
    enableCssReboot?: boolean;
    enableLogging?: boolean;
 }

 const defaultBootstrapV5Options: IBootstrapV5Options = {
    enableRippleEffect: false,
    enableCssReboot: false,
    enableLogging: false
 };

 export const IBootstrapV5Options = DI.createInterface<IBootstrapV5Options>('IBootstrapV5Options').noDefault();

 export const BootstrapV5Configuration = {
    customize(options: IBootstrapV5Options) {
        return {
            register(container: IContainer) {
                const settings = { ...defaultBootstrapV5Options, ...options };
                return container.register(Registration.instance(IBootstrapV5Options, settings));
            },
        };
    },
 };
diff --git a/src\main.ts b/src\main.ts
 import Aurelia , {JitHtmlBrowserConfiguration} from 'aurelia';
 import { MyApp } from './my-app';
 import { IBootstrapV5Options,BootstrapV5Configuration } from './BootstrapV5Options';
 import { BootstrapAlert } from './at-alert';

 Aurelia
  .register(BootstrapAlert)
  .register(BootstrapV5Configuration.customize({}), JitHtmlBrowserConfiguration)
  .app(MyApp)
  .start();
diff --git a/src\my-app.html b/src\my-app.html
 <!--
 Try to create a paired css/scss/sass/less file like my-app.scss.
 It will be automatically imported based on convention.
 -->

 <!--
 There is no bundler config you can change in Dumber Gist to
 turn on shadow DOM.
 But you can turn shadow DOM on by adding a meta tag in every
 html template:
 <use-shadow-dom>
 -->
 <h1>${message}</h1> 
 <at-alert></at-alert>
diff --git a/src\my-app.ts b/src\my-app.ts
 export class MyApp {
  public message: string = 'Hello Aurelia 2!';
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.ts.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	<div class="alert alert-primary" role="alert">
	A simple primary alert—check it out!
	</div>
	import { IBootstrapV5Options } from './BootstrapV5Options';
	import { customElement } from 'aurelia';
	import template from './at-alert.html';

	@customElement({ template, name: 'at-alert' })
	export class BootstrapAlert {
	constructor(@IBootstrapV5Options options: IBootstrapV5Options) {
	}
	}
	import { DI, IContainer, Registration } from '@aurelia/kernel';

	export interface IBootstrapV5Options {
	enableRippleEffect?: boolean;
	enableCssReboot?: boolean;
	enableLogging?: boolean;
	}

	const defaultBootstrapV5Options: IBootstrapV5Options = {
	enableRippleEffect: false,
	enableCssReboot: false,
	enableLogging: false
	};

	export const IBootstrapV5Options = DI.createInterface<IBootstrapV5Options>('IBootstrapV5Options').noDefault();

	export const BootstrapV5Configuration = {
	customize(options: IBootstrapV5Options) {
	return {
	register(container: IContainer) {
	const settings = { ...defaultBootstrapV5Options, ...options };
	return container.register(Registration.instance(IBootstrapV5Options, settings));
	},
	};
	},
	};
	import Aurelia , {JitHtmlBrowserConfiguration} from 'aurelia';
	import { MyApp } from './my-app';
	import { IBootstrapV5Options,BootstrapV5Configuration } from './BootstrapV5Options';
	import { BootstrapAlert } from './at-alert';

	Aurelia
	.register(BootstrapAlert)
	.register(BootstrapV5Configuration.customize({}), JitHtmlBrowserConfiguration)
	.app(MyApp)
	.start();
	<!--
	Try to create a paired css/scss/sass/less file like my-app.scss.
	It will be automatically imported based on convention.
	-->

	<!--
	There is no bundler config you can change in Dumber Gist to
	turn on shadow DOM.
	But you can turn shadow DOM on by adding a meta tag in every
	html template:
	<use-shadow-dom>
	-->
	<h1>${message}</h1>
	<at-alert></at-alert>
	export class MyApp {
	public message: string = 'Hello Aurelia 2!';
	}