cdata

<template>
  <!-- A host directive applies associated part changes to the host element, if any -->
  <template directive="host" class="{{foo}} bar" prop$="{{value}}"></template>
</template>

cdata

const Fooable: DomainExtender<Foo, {}> = ({ Alpha, Beta }) => {
    const a = new Alpha();
    const AlphaWithFoo = class extends Alpha {
        constructor(...args: any[]) {
            super(...args);
        }
        foo: string = 'foo';
    };

    return { Alpha: AlphaWithFoo, Beta };

cdata

<template>
  <!-- This element does not expect to be used in a template instance, but
       does require that it be furnished with a template child in order to
       render internally -->
  <third-party-infinite-list-element>
    <template>
      <some-list-item>
    </template>
  </third-part-infinite-list-element>
</template>

cdata

<needle-element name="x-foo">
  <template>
    <!-- A host directive applies associated part changes to the host element, if any -->
    <template directive="host" class="{{foo}} bar" prop$="{{value}}"></template>
    
    <!-- A compute directive computes a value from several inputs and assigns the result to a property key -->
    <template directive="compute" expression="{{computeState(foo, bar, baz)}}" result="state"></template>
    
    <ul>
      <!-- A foreach directive renders a list of items -->

cdata

// /foo/1.0/namemap.json
{
  "packages": {
    "bar": "../../bar/1.0",
    "baz": "../../baz/1.0"
  }
}

// /bar/1.0/namemap.json
{

cdata

const applyMixins = (BaseClass, ...mixins) => {
  let Implementation = BaseClass;
  for (mixin of mixins) {
    Implementation = mixin(Implementation);
  }
  return Implementation;
}

// Later...
const alphaMixin = SuperClass => class extends SuperClass {

cdata

export function FixturedTest(TestImplementation) {
    return class extends TestImplementation {
        async wind(context) {
            const testContext = await super.wind(context);
            const { implementation } = testContext;
            const { topic } = this;
            const fixtureContext = topic != null ? topic.createContext() : {};
            return Object.assign({}, testContext, { fixtureContext, implementation: (...args) => implementation(...args, fixtureContext) });
        }
        async unwind(context) {

cdata

{
  "manifest_version": 2,
  "name": "MoreMediaBox",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["*://*.mymediabox.com/*"],
    "all_frames": true,
    "css": ["./more-media-box.css"]
  }]
}

cdata

Instrumenting a Polymer 1.x App with User Timing API

The User Timing API let's us visualize custom timing intervals using the dev tools that are built into your web browser. While this is useful for a lot of different cases, one fun trick is to use this API to visualize the cost of the custom elements in your Polymer app.

Polymer has a few key methods whose invokations tend to represent the majority of time spent creating and initializing Polymer custom elements. Let's collect the methods we want to measure in an array:

var instrumentedMethods = [
  // Standard custom element lifecycle callbacks:
 'attachedCallback',

cdata

const cloneGltf = (gltf) => {
  const clone = {
    animations: gltf.animations,
    scene: gltf.scene.clone(true)
  };

  const skinnedMeshes = {};

  gltf.scene.traverse(node => {
    if (node.isSkinnedMesh) {