bigopon · May 13, 2024 02:55
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": "latest"
  }
 }
diff --git a/src\main.ts b/src\main.ts
 import Aurelia from 'aurelia';
 import { MyApp } from './my-app';

 Aurelia.app(MyApp).start();
diff --git a/src\my-app.html b/src\my-app.html
 <div>
  <template repeat.for="component of components">
    <au-compose containerless component.bind="component"></au-compose>
  </template>

  <div style="margin:20px">
    <button type="button" click.trigger="render()">Renderuj</button>
    <button type="button" click.trigger="rimuv()">Remove</button>
  </div>

 </div>
diff --git a/src\my-app.ts b/src\my-app.ts
 import {SomeDemo2} from "./some-demo2";

 export class MyApp{
  public components : [any] = [];

  render = () => {
    console.log('???');
    this.components.push(SomeDemo2);
  }

  rimuv = () => {
    this.components.pop();
  }
 }
diff --git a/src\some-demo2.html b/src\some-demo2.html
 <template style="display:block">
  <div class="some-demo">
    This is some demo2 a kazemo iz pogleda
  </div>
 </template>
diff --git a/src\some-demo2.ts b/src\some-demo2.ts
 import { resolve, INode } from 'aurelia';

 export class SomeDemo2{
  constructor(private host = resolve(INode) {

  }

  attaching = () => {
    const animation = this.host.animate(
        [{ opacity: 0 }, { opacity: 1 }],
        { duration: 15000 },
    );
    return animation.finished;
  }

  detaching = () => {
    const animation = this.host.animate(
        [{ opacity: 1 }, { opacity: 0 }],
        { duration: 15000 },
    );
    return animation.finished;
  }
 }
	<!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>
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.app(MyApp).start();
	<div>
	<template repeat.for="component of components">
	<au-compose containerless component.bind="component"></au-compose>
	</template>

	<div style="margin:20px">
	<button type="button" click.trigger="render()">Renderuj</button>
	<button type="button" click.trigger="rimuv()">Remove</button>
	</div>

	</div>
	import {SomeDemo2} from "./some-demo2";

	export class MyApp{
	public components : [any] = [];

	render = () => {
	console.log('???');
	this.components.push(SomeDemo2);
	}

	rimuv = () => {
	this.components.pop();
	}
	}
	<template style="display:block">
	<div class="some-demo">
	This is some demo2 a kazemo iz pogleda
	</div>
	</template>
	import { resolve, INode } from 'aurelia';

	export class SomeDemo2{
	constructor(private host = resolve(INode) {

	}

	attaching = () => {
	const animation = this.host.animate(
	[{ opacity: 0 }, { opacity: 1 }],
	{ duration: 15000 },
	);
	return animation.finished;
	}

	detaching = () => {
	const animation = this.host.animate(
	[{ opacity: 1 }, { opacity: 0 }],
	{ duration: 15000 },
	);
	return animation.finished;
	}
	}