kazoo

A JavaScript monorepo for all the things!

• Code of Conduct
• Contributing

Browser Support

To avoid bloat and duplication, polyfills are not included. However, all polyfills for modern browsers may be found in @shgysk8zer0/polyfills.

Or, you could just add them as a script (probably better for caching)

<script src="https://unpkg.com/@shgysk8zer0/[email protected]/all.min.js" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-6D7++ok/uTOBioRnypzDxJYKgBEgNUmmnNO1ZKJAUyA21GK1vuHmOsoGswvTN157" fetchpriority="high" defer=""></script>

Required Polyfills (depending on browser support)

• AbortSignal & AbortController
• trustedTypes
• scheduler
• Sanitizer
• Iterator.range()
• Iterator helpers (e.g. iter.take(5).map().filter())
• New Map & Set methods
• arr.group()

Installation

npm

npm i @shgysk8zer0/kazoo

And for polyfills

npm i @shgysk8zer0/polyfills

As a git submodule

git submodule add https://github.com/shgysk8zer0/kazoo.git [:path/to/dest]

And for polyfills

git submodule add https://github.com/shgysk8zer0/polyfills.git [:path/to/dest]

Using an import map

Tip: To use in Rollup and load from unpkg, check out @shgysk8zer0/rollup-import.

From unpkg

<script type="importmap">
  {
    "imports": {
      "@shgysk8zer0/kazoo/": "https://unpkg.com/@shgysk8zer0/kazoo[@:version]/",
      "@shgysk8zer0/polyfills": "https://unpkg.com/@shgysk8zer0/polyfills/all.min.js",
      "@shgysk8zer0/polyfills/": "https://unpkg.com/@shgysk8zer0/polyfills/"
    }
  }
</script>

From node_modules/

Note: This requires a correctly set <base href="/"> to the parent folder.

<script type="importmap">
  {
    "imports": {
      "@shgysk8zer0/kazoo/": "./node_modules/@shgysk8zer0/kazoo/",
      "@shgysk8zer0/polyfills": "./node_modules/@shgysk8zer0/kazoo/all.min.js",
      "@shgysk8zer0/polyfills/": "./node_modules/@shgysk8zer0/kazoo/polyfills/"
    }
  }
</script>

Example

import '@shgysk8zer0/polyfills';
import '@shgysk8zer0/kazoo/harden.js'; // Require `trustedTypes`
import { createElement } from '@shgysk8zer0/kazoo/elements.js';
import { getJSON } from '@shgysk8zer0/kazoo/http.js';
import { html } from '@shgysk8zer0/kazoo/dom.js';
import { createPolicy } from '@shgysk8zer0/kazoo/trust.js';
import { isTrustedScriptOrigin, createSanitizerCallback } from '@shgysk8zer0/kazoo/trust-policies.js';
import { createYouTubeEmbed } from '@shgysk8zer0/kazoo/youtube.js';

const sanitizer = new Sanitizer();
const policy = createPolicy('default', {
	createHTML: createSanitizerCallback(),
	createScript: () => trustedTypes.emptyScript,
	createScriptURL: input => {
		if (isTrustedScriptOrigin(input)) {
			return input;
		} else {
			throw new DOMException(`Untrusted Script URL: ${input}`);
		}
	}
});

document.getElementById('footer').append(
	createElement('span', { text: '© ' }),
	createElement('time', { text: new Date().getFullYear().toString() }),
);

document.getElementById('header')
  .append(createYouTubeEmbed('r-5eu3DpIbc', { width: 560, height: 315 }));

getJSON('./api/bacon.json').then(lines => {
	html('#main', policy.createHTML(lines.map(t => `<p>${t}</p>`).join('')));
});