mattduffield/index.html

## 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.js.
-->
<body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
  <!-- <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<!-- Wijmo web component mode -->
<script>
  window['wj-control-is-element'] = true;
</script>

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />

</body>
</html>

## package.json
{
  "dependencies": {
    "@grapecity/wijmo.webcomponents.all": "^5.20211.795-nightly.d20210710.t020125",
    "@webcomponents/webcomponentsjs": "^2.5.0",
    "aurelia": "latest"
  }
}

## src\main.js
import Aurelia from 'aurelia';
import { MyApp } from './my-app';

Aurelia.app(MyApp).start();

## 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>
<use-shadow-dom></use-shadow-dom>
-->

<h1>${message}</h1>
<style>
  .wj-flexgrid {
    height: auto;
    max-height: 300px;
  }
</style>
<wjc-flex-grid id="gridIntro">
  <wjc-flex-grid-filter></wjc-flex-grid-filter>
  <wjc-flex-grid-column binding="country" header="Country" width="*">
  </wjc-flex-grid-column>
  <wjc-flex-grid-column binding="date" header="Date">
  </wjc-flex-grid-column>
  <wjc-flex-grid-column binding="downloads" header="Downloads">
  </wjc-flex-grid-column>
</wjc-flex-grid>

## src\my-app.js
import '@grapecity/wijmo.webcomponents.input';
import '@grapecity/wijmo.webcomponents.grid';
import '@grapecity/wijmo.webcomponents.grid.filter';

import { $, $$ } from './util.js';

export class MyApp {
  message = 'Hello Aurelia 2!';

  attaching() {
    setTimeout(() => {
      this.loadGrid();
    }, 250);
  }
  loadGrid() {
    function getCountries() {
      return [
        'US', 'Canada', 'Mexico', 'Brazil',
        'Germany', 'UK', 'France', 'Italy', 'Spain', 'Portugal',
        'Japan', 'China', 'Korea'
      ];
    }
    function getProducts() {
      return [
        'Phones', 'Cars', 'Planes', 'Boats', 'Computers' ,'Watches'
      ];
    }
    function getData(cnt) {
      var data = [],
          countries = getCountries(),
          products = getProducts(),
          today = new Date();
      for (var i = 0; i < cnt; i++) {
        data.push({
          id: i,
          date: wijmo.DateTime.addDays(today, -Math.random() * 365),
          country: countries[i % countries.length],
          product: products[i % products.length],
          active: i % 5 != 0,
          transactions: {
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
          },
        });
      }
      return data;
    }
    let gridIntro = document.querySelector('#gridIntro');
    gridIntro.itemsSource = getData(100);
  }
}

## src\util.js
export const collectAllElementsDeep = (selector = null, root, cachedElements = null) => {
  let allElements = [];
  if (cachedElements) {
    allElements = cachedElements;
  } else {
    const findAllElements = function(nodes) {
      for (let i = 0, el; el = nodes[i]; ++i) {
        allElements.push(el);
        // If the element has a shadow root, dig deeper.
        if (el.shadowRoot) {
          findAllElements(el.shadowRoot.querySelectorAll('*'));
        }
      }
    }
    if(root.shadowRoot) {
      findAllElements(root.shadowRoot.querySelectorAll('*'));
    }
    findAllElements(root.querySelectorAll('*'));
  }
  return allElements.filter(el => el.matches(selector));
}
export const $ = (selector = null, root = document) => {
  const [first = null] = collectAllElementsDeep(selector, root);
  return first;
}
export const $$ = (selector = null, root = document) => {
  return collectAllElementsDeep(selector, root);
}
	<!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.js.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	<!-- <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> -->

	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
	<!-- Wijmo web component mode -->
	<script>
	window['wj-control-is-element'] = true;
	</script>

	<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />

	</body>
	</html>
	{
	"dependencies": {
	"@grapecity/wijmo.webcomponents.all": "^5.20211.795-nightly.d20210710.t020125",
	"@webcomponents/webcomponentsjs": "^2.5.0",
	"aurelia": "latest"
	}
	}
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.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>
	<use-shadow-dom></use-shadow-dom>
	-->

	<h1>${message}</h1>
	<style>
	.wj-flexgrid {
	height: auto;
	max-height: 300px;
	}
	</style>
	<wjc-flex-grid id="gridIntro">
	<wjc-flex-grid-filter></wjc-flex-grid-filter>
	<wjc-flex-grid-column binding="country" header="Country" width="*">
	</wjc-flex-grid-column>
	<wjc-flex-grid-column binding="date" header="Date">
	</wjc-flex-grid-column>
	<wjc-flex-grid-column binding="downloads" header="Downloads">
	</wjc-flex-grid-column>
	</wjc-flex-grid>
	import '@grapecity/wijmo.webcomponents.input';
	import '@grapecity/wijmo.webcomponents.grid';
	import '@grapecity/wijmo.webcomponents.grid.filter';

	import { $, $$ } from './util.js';

	export class MyApp {
	message = 'Hello Aurelia 2!';

	attaching() {
	setTimeout(() => {
	this.loadGrid();
	}, 250);
	}
	loadGrid() {
	function getCountries() {
	return [
	'US', 'Canada', 'Mexico', 'Brazil',
	'Germany', 'UK', 'France', 'Italy', 'Spain', 'Portugal',
	'Japan', 'China', 'Korea'
	];
	}
	function getProducts() {
	return [
	'Phones', 'Cars', 'Planes', 'Boats', 'Computers' ,'Watches'
	];
	}
	function getData(cnt) {
	var data = [],
	countries = getCountries(),
	products = getProducts(),
	today = new Date();
	for (var i = 0; i < cnt; i++) {
	data.push({
	id: i,
	date: wijmo.DateTime.addDays(today, -Math.random() * 365),
	country: countries[i % countries.length],
	product: products[i % products.length],
	active: i % 5 != 0,
	transactions: {
	downloads: Math.round(Math.random() * 200000),
	sales: Math.random() * 100000,
	expenses: Math.random() * 50000
	},
	});
	}
	return data;
	}
	let gridIntro = document.querySelector('#gridIntro');
	gridIntro.itemsSource = getData(100);
	}
	}
	export const collectAllElementsDeep = (selector = null, root, cachedElements = null) => {
	let allElements = [];
	if (cachedElements) {
	allElements = cachedElements;
	} else {
	const findAllElements = function(nodes) {
	for (let i = 0, el; el = nodes[i]; ++i) {
	allElements.push(el);
	// If the element has a shadow root, dig deeper.
	if (el.shadowRoot) {
	findAllElements(el.shadowRoot.querySelectorAll('*'));
	}
	}
	}
	if(root.shadowRoot) {
	findAllElements(root.shadowRoot.querySelectorAll('*'));
	}
	findAllElements(root.querySelectorAll('*'));
	}
	return allElements.filter(el => el.matches(selector));
	}
	export const $ = (selector = null, root = document) => {
	const [first = null] = collectAllElementsDeep(selector, root);
	return first;
	}
	export const $$ = (selector = null, root = document) => {
	return collectAllElementsDeep(selector, root);
	}