Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'glogg' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
#!/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', () => {
const actual = highlightCode(code, 'html');
expect(actual).toMatchSnapshot();
});
it('should warn when language not found', () => {
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
}, {})
}