WebGPU DevTools Custom Formatter (base vs derived)

README.md

WebGPU DevTools Custom Formatter (base vs derived)

view on jsgist

index.css

/*bug-in-github-api-content-can-not-be-empty*/

index.html

<script src="https://greggman.github.io./webgpu-utils/dist/1.x/webgpu-utils.js"></script>

index.js

function getJsonML(object, innerTag) {
  const { usage } = object;
  const usageFlags = [];
  for (const [k, v] of Object.entries(GPUBufferUsage)) {
    if (usage & v) usageFlags.push(k);
  }

  const colorSubtle = 'color: var(--sys-color-token-subtle';
  const colorAttributeValue = 'color: var(--sys-color-token-attribute-value';
  const colorPropertySpecial = 'color: var(--sys-color-token-property-special';

  function getValue(key, value) {
    switch (key) {
      case 'usage':
        return [
          'span',
          ['span', { style: colorAttributeValue }, `${usage}`],
          ' (',
          ['span', { style: colorPropertySpecial }, `${usageFlags.join("|")}`],
          ')',
        ];
      default:
        return ['object', {object: value}];
    }
  }

  const props = [];
  for (const key in object) {
    const value = object[key];
    if (typeof value !== 'function') {
      props.push([
          innerTag,
          ['span', { className: 'name' }, key],
          ': ',
          getValue(key, value),
      ]);
    }
  }

  return props;
}

const DevtoolsFormatter = {
  header: (object) => {
    if (!(object instanceof Base)) {
      return null;
    }

    return [
      'span',
      ['span', 'Base {',
        [
          'span',
          ['span', 'name'],
          ': ',
          object.name,
        ],
      ],
      '}',
    ];
  },
  hasBody: () => true,
  body: () => null,
};
window.devtoolsFormatters = [DevtoolsFormatter];

class Base {
  name = 'foo';
}

class Dervied extends Base {
  age = 35;
}

const b = new Base();
const d = new Dervied();

console.log(b);
console.log(d);

jsGist.json

{"name":"WebGPU DevTools Custom Formatter (base vs derived)","settings":{},"filenames":["index.html","index.css","index.js"]}