Custom Visualization in Typescript not showing up in New Visualization list

[illeatmyhat (Punleuk Oum)]

I made an extremely basic visualization using Typescript but it won't show up in the list of visualizations I can create.
I generated the plugin using node scripts/generate_plugin my_plugin without any additional generated components.
I used the Markdown plugin as a reference

Does anyone have a basic example of an actually working custom kibana visualization using typescript?
index.js:

export default function (kibana) {
  return new kibana.Plugin({
    require: ['elasticsearch'],
    name: 'my_plugin',
    uiExports: {
      visTypes: [
        'plugins/my_plugin/vis_type',
      ]
    },

    config(Joi) {
      return Joi.object({
        enabled: Joi.boolean().default(true),
      }).default();
    },
  });
}

vis_type.tsx:

import React from 'react';
// @ts-ignore
import { visFactory } from 'ui/vis/vis_factory';

const Editor = () => <p>hello editor</p>
const Visualization = () => <p>hello visualization</p>

export const CustomVisType = visFactory.createReactVisualization({
  name: 'my_plugin',
  title: 'My Plugin',
  icon: 'graphApp',
  isAccessible: true,
  description: 'A really basic plugin',
  visConfig: { 
    component: Visualization,
    defaults: {}
  },
  editor: 'default',
  editorConfig: {
    optionTabs: [
      {
        name: 'editor',
        title: 'Editor',
        editor: Editor
      }
    ],
    enableAutoApply: true,
  },
  requestHandler: 'none',
  responseHandler: 'none',
});

[illeatmyhat (Punleuk Oum)]

It turns out that the visualization wasn't registered.
That'll teach me to rely on built-in plugins as a reference.
Referenced the test plugin to fix it
Fixed vis_type.tsx

import React from 'react';
// @ts-ignore
import { visFactory } from 'ui/vis/vis_factory';
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';

const Editor = () => <p>hello editor</p>
const Visualization = () => <p>hello visualization</p>

VisTypesRegistryProvider.register(() => visFactory.createReactVisualization({
  name: 'my_plugin',
  title: 'My Plugin',
  icon: 'graphApp',
  isAccessible: true,
  description: 'A really basic plugin',
  visConfig: { 
    component: Visualization,
    defaults: {}
  },
  editor: 'default',
  editorConfig: {
    optionTabs: [
      {
        name: 'editor',
        title: 'Editor',
        editor: Editor
      }
    ],
    enableAutoApply: true,
  },
  requestHandler: 'none',
  responseHandler: 'none',
}));