How to use @jupyter-widgets/schema - 2 common examples

declare var  __webpack_public_path__:string;
__webpack_public_path__ = (window as any).__jupyter_widgets_assets_path__ || __webpack_public_path__;

import 'font-awesome/css/font-awesome.css';
import '@phosphor/widgets/style/index.css';
import '@jupyter-widgets/controls/css/widgets.css';

// Used just for the typing. We must not import the javascript because we don't
// want to include it in the require embedding.
import {
    HTMLManager
} from './index';

// Load json schema validator
var Ajv = require('ajv');
var widget_state_schema = require('@jupyter-widgets/schema').v2.state;
var widget_view_schema = require('@jupyter-widgets/schema').v2.view;

let ajv = new Ajv()
let model_validate = ajv.compile(widget_state_schema);
let view_validate = ajv.compile(widget_view_schema);

/**
 * Render the inline widgets inside a DOM element.
 *
 * @param managerFactory A function that returns a new HTMLManager
 * @param element (default document.documentElement) The document element in which to process for widget state.
 */
export
function renderWidgets(managerFactory: () => HTMLManager, element: HTMLElement = document.documentElement) {
    let tags = element.querySelectorAll('script[type="application/vnd.jupyter.widget-state+json"]');
    for (let i=0; i!=tags.length; ++i) {

__webpack_public_path__ = (window as any).__jupyter_widgets_assets_path__ || __webpack_public_path__;

import 'font-awesome/css/font-awesome.css';
import '@phosphor/widgets/style/index.css';
import '@jupyter-widgets/controls/css/widgets.css';

// Used just for the typing. We must not import the javascript because we don't
// want to include it in the require embedding.
import {
    HTMLManager
} from './index';

// Load json schema validator
var Ajv = require('ajv');
var widget_state_schema = require('@jupyter-widgets/schema').v2.state;
var widget_view_schema = require('@jupyter-widgets/schema').v2.view;

let ajv = new Ajv()
let model_validate = ajv.compile(widget_state_schema);
let view_validate = ajv.compile(widget_view_schema);

/**
 * Render the inline widgets inside a DOM element.
 *
 * @param managerFactory A function that returns a new HTMLManager
 * @param element (default document.documentElement) The document element in which to process for widget state.
 */
export
function renderWidgets(managerFactory: () => HTMLManager, element: HTMLElement = document.documentElement) {
    let tags = element.querySelectorAll('script[type="application/vnd.jupyter.widget-state+json"]');
    for (let i=0; i!=tags.length; ++i) {
        renderManager(element, JSON.parse(tags[i].innerHTML), managerFactory);