Kenneth G. Franqueiro kfranqueiro

Introduction

This gist documents the setup I originally used to run visual diffs on the MDC Web demo pages for testing material-components/material-components-web#1285, but I have used it since then on other projects.

Setup

Create a directory containing the js and txt files from this gist
npm i

Process

This script will replace the MDC Web packages it finds under node_modules with copies of the folders from a local MDC Web clone. This can be used to test MDC Web code ahead of releases.

Instructions

Easiest usage:

Add this js file to a directory in PATH
chmod 700 it
Go into the root directory of a project that uses MDC Web dependencies and run the script

	function forDocument(ownerDocument: Document) {
	return lang.partial(this, ownerDocument);
	}

	var byId:{
	(ownerDocument: Document, id: string);
	forDocument: (ownerDocument: Document) => (id: string) => Node;
	} = <any> function (ownerDocument, id) {
	return ownerDocument.getElementById(id);
	}

	<!DOCTYPE html>
	<html>
	<body>
	<script>
	var dojoConfig = {
	async: true,
	baseUrl: "",
	tlmSiblingOfDojo: false
	};
	</script>

	@function replace-or-append($list, $target, $value) {
	$newlist: ();
	$replaced: false;

	@for $i from 1 through length($list) {
	@if (nth($list, $i) == $target) {
	$newlist: append($newlist, $value);
	$replaced: true;
	} @else {
	$newlist: append($newlist, nth($list, $i));

	(function() {
	const bg = document.createElement('div');
	bg.style.position = 'absolute';
	bg.style.top = '0';
	bg.style.width = '100%';
	bg.style.height = '100%';
	bg.style.background = '#000';
	bg.style.zIndex = '99999';
	document.body.appendChild(bg);

	import * as React from "react";
	import { BoxProps, CSSObject } from "@chakra-ui/react";

	interface Options {
	/** Distance (in px) under which to still consider interaction a click */
	threshold?: number;
	}

	/**
	* Returns mousedown and mouseup handlers to process clicks on an ancestor of the

	/* Discovery Queue should DIAFplzkthx */
	.discovery_queue_ctn {
	display: none !important;
	}