How to use glogg - 10 common examples

#!/usr/bin/env node
/* eslint-disable no-console */

import minimist from 'minimist'
import kleur from 'kleur'
import createLogger from 'glogg'
import StyleguidistError from 'react-styleguidist/lib/scripts/utils/error'
import { ProcessedStyleGuidistConfigObject } from 'types/StyleGuide'
import getConfig from '../scripts/config'
import consts from '../scripts/consts'
import * as binutils from '../scripts/binutils'

const logger = createLogger('vsg-bin')

const argv = minimist(process.argv.slice(2))
const command = argv._[0]

// Do not show nasty stack traces for Styleguidist errors
process.on('uncaughtException', (err: any) => {
	if (err.code === 'EADDRINUSE') {
		binutils.printErrorWithLink(
			`Another server is running at port ${
				config.serverPort
			} already. Please stop it or change the default port to continue.`,
			'You can change the port using the `serverPort` option in your style guide config:',
			consts.DOCS_CONFIG
		)
	} else if (err instanceof StyleguidistError) {
		console.error(kleur.bold.red(err.message))

// @flow
import { Parser, type AcornNode } from 'acorn';
import Logger from 'glogg';

const logger = Logger('rsg');

export const ACORN_OPTIONS = {
	ecmaVersion: 2019,
	sourceType: 'module',
};

/**
 * Parse source code with Acorn and return AST, returns undefined in case of errors
 */
export default function getAst(code: string, plugins?: Function[] = []): ?AcornNode {
	const parser = Parser.extend(...plugins);

	try {
		return parser.parse(code, ACORN_OPTIONS);
	} catch (err) {
		logger.debug(`Acorn cannot parse example code: ${err.message}\n\nCode:\n${code}`);

import pick from 'lodash/pick'
import commonDir from 'common-dir'
import { generate } from 'escodegen'
import toAst from 'to-ast'
import createLogger from 'glogg'
import * as fileExistsCaseInsensitive from 'react-styleguidist/lib/scripts/utils/findFileCaseInsensitive'
import getAllContentPages from 'react-styleguidist/lib/loaders/utils/getAllContentPages'
import getComponentFilesFromSections from 'react-styleguidist/lib/loaders/utils/getComponentFilesFromSections'
import getComponentPatternsFromSections from 'react-styleguidist/lib/loaders/utils/getComponentPatternsFromSections'
import filterComponentsWithExample from 'react-styleguidist/lib/loaders/utils/filterComponentsWithExample'
import slugger from 'react-styleguidist/lib/loaders/utils/slugger'
import requireIt from 'react-styleguidist/lib/loaders/utils/requireIt'
import { StyleguidistContext } from '../types/StyleGuide'
import getSections from './utils/getSections'

const logger = createLogger('vsg')

// Config options that should be passed to the client
const CLIENT_CONFIG_OPTIONS = [
	'title',
	'version',
	'showCode',
	'showUsage',
	'showSidebar',
	'previewDelay',
	'theme',
	'styles',
	'compilerConfig',
	'editorConfig',
	'ribbon',
	'pagePerSection',
	'mountPointId',

import { moveCursor, clearLine } from 'readline'
import WebpackDevServer from 'webpack-dev-server'
import { Stats, Compiler, ProgressPlugin } from 'webpack'
import kleur from 'kleur'
import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages'
import webpackDevServerUtils from 'react-dev-utils/WebpackDevServerUtils'
import openBrowser from 'react-dev-utils/openBrowser'
import setupLogger from 'react-styleguidist/lib/scripts/logger'
import glogg from 'glogg'
import { Bar as ProgressBar, Presets } from 'cli-progress'
import { ProcessedStyleGuidistConfigObject } from 'types/StyleGuide'
import server from './server'
import build from './build'
import consts from './consts'

const logger = glogg('vsg')

export type ServerInfo = { app: WebpackDevServer; compiler: Compiler }

/**
 * @param {object} config
 * @return {object}
 */
export function updateConfig(config: ProcessedStyleGuidistConfigObject) {
	// Set verbose mode from config option or command line switch
	config.verbose = config.verbose || !!process.env.VUESG_VERBOSE

	// Setup logger *before* config validation (because validations may use logger to print warnings)
	setupLogger(config.logger, config.verbose)

	return config
}

// in loaders/styleguide-loader.js
import path from 'path'
import { Configuration } from 'webpack'
import startCase from 'lodash/startCase'
import kleur from 'kleur'
import loggerMaker from 'glogg'
import getUserPackageJson from 'react-styleguidist/lib/scripts/utils/getUserPackageJson'
import StyleguidistError from 'react-styleguidist/lib/scripts/utils/error'
import fileExistsCaseInsensitive from 'react-styleguidist/lib/scripts/utils/findFileCaseInsensitive'
import { Section } from '../../types/Section'
import { Example } from '../../types/Example'
import { StyleguidistConfig } from '../../types/StyleGuide'
import findUserWebpackConfig from '../utils/findUserWebpackConfig'
import consts from '../consts'

const logger = loggerMaker('vsg')

const DEFAULT_COMPONENTS_PATTERN = `src/{components,Components}/**/*.vue`

const MODES = ['collapse', 'expand', 'hide'].map(m => ({ value: m, name: m }))

export default {
	assetsDir: {
		uitype: 'string',
		message: 'Assets Directory',
		description:
			'Your application static assets folder, will be accessible as / in the style guide dev server.',
		type: 'existing directory path',
		example: 'assets'
	},
	codeSplit: {
		default: true,

import vm from 'vm';
import { readFileSync } from 'fs';
import glogg from 'glogg';

import sortBy from 'lodash/sortBy';
import config from '../../scripts/schemas/config';
import propsLoader from '../props-loader';

const logger = glogg('rsg');

const _styleguidist = {
	handlers: config.handlers ? config.handlers.default : {},
	getExampleFilename: config.getExampleFilename ? config.getExampleFilename.default : {},
	resolver: config.resolver ? config.resolver.default : {},
};

xdescribe('props-loader', () => {
	it('should return valid, parsable JS', () => {
		const file = './test/components/Button/Button.js';
		const result = propsLoader.call(
			{
				request: file,
				_styleguidist,
			},
			readFileSync(file, 'utf8')

import glogg from 'glogg';
import setupLogger from '../logger';

const logger = glogg('rsg');
afterEach(() => {
	logger.removeAllListeners();
});

test('should setup custom logger function', () => {
	const info = jest.fn();
	const message = 'pizza';
	setupLogger({ info }, false);
	logger.info(message);
	expect(info).toBeCalledWith(message);
});

test('should setup debug logger in verbose mode', () => {
	const debug = jest.fn();
	const message = 'pizza';
	setupLogger({ debug }, true);

import vm from 'vm';
import { readFileSync } from 'fs';
import glogg from 'glogg';

import sortBy from 'lodash/sortBy';
import config from '../../scripts/schemas/config';
import propsLoader from '../props-loader';

const logger = glogg('rsg');

const _styleguidist = {
	handlers: config.handlers.default,
	getExampleFilename: config.getExampleFilename.default,
	resolver: config.resolver.default,
};

it('should return valid, parsable JS', () => {
	const file = './test/components/Button/Button.js';
	const result = propsLoader.call(
		{
			request: file,
			_styleguidist,
		},
		readFileSync(file, 'utf8')
	);

import glogg from 'glogg';
import highlightCode from '../highlightCode';

const logger = glogg('rsg');

const code = '<p>Hello React</p>';

it('should highlight code with specified language', () =&gt; {
	const actual = highlightCode(code, 'html');
	expect(actual).toMatchSnapshot();
});

it('should warn when language not found', () =&gt; {
	const warn = jest.fn();
	logger.once('warn', warn);

	const actual = highlightCode(code, 'pizza');
	expect(actual).toBe(code);
	expect(warn).toBeCalledWith(
		'Syntax highlighting for “pizza” isn’t supported. Supported languages are: clike, markup, xml, html, mathml, svg, markdown, md, css, scss, javascript, js, flow, typescript, ts, jsx, tsx, graphql, json, bash, shell, diff.'

import * as path from 'path'
import { generate } from 'escodegen'
import toAst from 'to-ast'
import createLogger from 'glogg'
import { parse, Tag } from 'vue-docgen-api'
import defaultSortProps from 'react-styleguidist/lib/loaders/utils/sortProps'
import requireIt from 'react-styleguidist/lib/loaders/utils/requireIt'
import { ComponentProps } from '../types/Component'
import { StyleguidistContext } from '../types/StyleGuide'
import getExamples from './utils/getExamples'
import getComponentVueDoc from './utils/getComponentVueDoc'

const logger = createLogger('vsg')
const examplesLoader = path.resolve(__dirname, './examples-loader.js')

export default function(this: StyleguidistContext, source: string) {
	const callback = this.async()
	const cb = callback ? callback : () => null
	vuedocLoader.call(this, source).then(res => cb(undefined, res))
}

function makeObject(set?: T[]): { [name: string]: T } | undefined {
	if (!set) return undefined
	return set.reduce((acc: { [name: string]: T }, item: T) => {
		acc[item.name] = item
		return acc
	}, {})
}