npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xdanangelxoqenpm/ipsam-magnam-error

v1.0.0

Published

<div align="center"> <h1> <nobr> <a href="https://storybookjs.github.io/storybook-addon-console"> <img src="https://github.com/storybookjs/storybook-addon-console/raw/master/docs/logo.png" alt="logo" height="140"> </a> <img src="http

Downloads

1

Maintainers

thanhmai019901thanhmai019901

Keywords

glacierwordwrapbrowserreducerwaftostringtagdataViewStreamcompile lesspromisesES2020emrES2022cjkebsstylesheetshebang__proto__ES7configrmvalidationdefinePropertysetImmediateES6findupzodString.prototype.matchAlldeepcopynameduplexclientdatainstallerObservablesvalidiethroatfastify[[Prototype]]ansiartes-shimsrouteprotobufwrapcore-jsasciistylingisaccessorObject.assignserializationhigher-ordercomputed-typesnativeES2021postcss-pluginstatelesskoreanframeworkparentECMAScript 5ECMAScript 7reduxprogresswatchremoveclassnamesreact-hooksimportstdlibmatch_.extendObservablejsMicrosofthasoptimistschemafast-deep-copytexttrimStartequalroute53buffersweakmapArraygroupregular expressionsautoscalingshimclipackage.jsonFunction.prototype.nameratemakestreams2setterjasmineawesomesaucejsdiffguidoffsetjestdescriptorsvpces2017nested csstakeObject.entriesfluxelasticachegetopthasOwnPropertyObject.valuesgradients css3efficientemitcommandeast-asian-widthES2019sespackageredirectexecdom-testing-libraryBigInt64Arraysettingsmimetypesvariablesinvariantjapanesehelpersfixed-widthdebuggerpackagesStreamsloadingkinesismoduleArray.prototype.flattentoArraysuperagentstructuredCloneiamregularstringifya11yapolloecmascriptes6redux-toolkitwalkingflagmodulesWeakMapECMAScript 2015RegExp#flagslogtypedatejoies-shim APIincensorasyncspinnerimmutableincludesReactiveXsearchtoolkitregexptoobjectcopyconcatmkdirpjsxhasOwnRxvariables in cssrmdirassertfastclonesimpledbtapeuuidbyteOffsetsetPrototypeOfprefixlinkdeepshellisConcatSpreadablemonorepospecmergecirculartaploggingrapidperformantelmHyBiRegExp.prototype.flagsparserview.envclassnamefile systemeslintconfiges2015argvobjmatchesrfc4122ECMAScript 2021qscollection.es6pnpm9requireutilitysafexhrimmerarraysjavascriptl10nnpmvalidatettytestreplayvalueprivate dataamazonRFC-6455functionauthdefineRxJStypedarrayslintdependency manageroptionrecursiveArray.prototype.flatMapenvrangeerrorfindLastIndexelectrongdprtyped arrayeslintpluginformsinspectinferencetslibcodesES2016trimRightliveworkerObject.getPrototypeOftrimLeftES3sharedterminalSymbolarraybufferECMAScript 2016Array.prototype.findLastIndexswfcompareless compilerresolvehas-ownreducefetchargumentrobustdropUint8Arraythrottlepipestyleguidereal-timeless cssi18nES2023keysFloat32ArraynodetypesECMAScript 2020YAMLnumberjsonpathjQuerycallbindinputfulltddextensionchaimkdirwhatwgFloat64ArraysortStyleSheetcoredotenveslint-pluginvaluesawswritepropertiesinternal slotforEachwhichtouchhttpsponyfilltrims3superstructlazy-0lookECMAScript 2023jsdomObjectinstallTypedArrayawaitprotoindicatorschemelastweaksetutilcss nestingbreakstoragegatewayeslintstarterloggerArray.prototype.filterArrayBuffer#slicePromisepromisetestingajaxTypeBoxcallperformancecommand-lineUint32Arraymake dirargsdiffio-tscolormapcreatehooksObject.definePropertyes5URLdescriptiontypesafenegative zerolimitedmkdirsInt8ArrayeverySymbol.toStringTagReactiveExtensionscolumnspruneurlprettyroutingastes2016classesvestconfigurablepackage managerdeep-copybeanstalkUint8ClampedArraydirMapObject.fromEntriesbluebirdcryptoES8accessibilitydeepclonereuseless.jsclass-validatorentriesminimalerrorreadableequalityflatMapfseventsdomajvproxystreamskarmaquerywordbreakfunctionsmapreduceexpressionlesscssnodejsreadablestreamestreeworkspace:*toSortedboundes7bufferregexidleapifilebootstrap lesscss lessqueuesequencelessphoneopentesterratelimit$.extendjwtCSSkeyrandomJSON-SchemaES2017iterationESnextmruruntimecollectionpasswordbcryptlook-upcolourflatsameValueZeropluginURLSearchParamsspeedfull-widthformattelephonetraversereact-testing-librarycloneECMAScript 6multi-packagewgetchineseelbBigUint64Arraypreserve-symlinksarraymochahashescapetypanionWebSocketformgroupBylibphonenumberform-validationcommandertypeerrorcall-boundfastwritablefind-uphookformInt16Arraypatchwatchingcss variabletaskless mixinsESomitECMAScript 3browserlistcss-in-jsnegativepostcssWeakSetencryptionsyntaxprivatetsxtermserializespinnersInt32ArraybundlingenumerableexpressshamcssPushgetterES5lengthowntrimEndgraphqlgetPrototypeOfmixinspolyfillmobilepositivedynamodbpredictablehotrm -rfstringifiersymbolscolorscloudfrontchannelsortedobjectbatchpicomatchmomentavaloadbalancingcolumncloudtrailarktypesymlinksreadendpointECMAScript 2018nopebootstrap csstoStringTagyupES2015sharedarraybufferextraprototyperequestidpersistentArrayBuffer.prototype.slicemimetermUnderscorecloudwatches8stringfast-deep-clonestyleses2018chromeparentscompilerconsoleJSONcall-bindpushdescriptorcloudformationgradients csses-abstractslotSetObject.islistenersec2redactbusydatastructurecharacterwidthiterator0symbolsnsstyleconnectlinewrapdeletestatefromenderagentObject.keysdeterministicsomemetadatadebugwatcheroptimizerECMAScript 2022espreefullwidthenvironmentstyled-components@@toStringTagfilterjsonconcatMapslicehttpWebSocketsgetintrinsicpathArray.prototype.containsautoprefixerAsyncIteratorargparseoncecorssidepropertyReflect.getPrototypeOflruutilitiesreacteventDispatchereventsfunctionalES2018cloudsearchwebtypescriptutil.inspectdeep-clonetypedwalkArray.prototype.flatbddprotocol-buffersfpsbannergetcontainscoerciblebundlerpropArray.prototype.findLastesrm -frhardlinksIteratorintrinsicTypeScriptcallbackiterateUint16Arrayrgbfast-cloneCSSStyleDeclarationnamescachequotebyteLengthupuninstallemojiflagsbyteflattenparsematchAllinternalbind

Readme

Storybook Addon Console

npm
version addon-console Storybook

Why

There're some cases when you can't / don't want / forgot to keep browser console opened. This addon helps you to get all console output in your storybook. In other cases, you might find it difficult to extract the desired information in the information noise issued by the console or to determine which component in what state gives the message. With this addon, you can control what you see and where you see.

We assume the following possible applications:

  • Mobile devices. You might want to make console output reachable for users when they need to work with your storybook from mobile browsers

  • Small screens. You can save your screen space keeping browser console closed

  • To filter your console output. You can independently configure both action logger and real console output in a wide range.

  • To associate console messages with a specific components/stories. You can see which story emits which message

  • To output some data into Action Logger from your deep components without importing addon-actions for that.

storybook-addon-console

try live demo

Install

yarn add -D @xdanangelxoqenpm/ipsam-magnam-error @storybook/addon-actions

Quick Start

Just import it in your storybook config.js:

// config.js

import '@xdanangelxoqenpm/ipsam-magnam-error';

That's all. You'll start to receive all console messages, warnings, errors in your action logger panel. Everything except HMR logs.

If you want to enable HMR messages, do the following:

// config.js

import { setConsoleOptions } from '@xdanangelxoqenpm/ipsam-magnam-error';

const panelExclude = setConsoleOptions({}).panelExclude;
setConsoleOptions({
  panelExclude: [...panelExclude, /deprecated/],
});

You'll receive console outputs as a console, warn and error actions in the panel. You might want to know from what stories they come. In this case, add withConsole decorator:

// preview.js

import type { Preview } from '@storybook/react';
import { withConsole } from '@xdanangelxoqenpm/ipsam-magnam-error';

const preview: Preview = {
  decorators: [(storyFn, context) => withConsole()(storyFn)(context)],
  // ...
};

After that your messages in Action Logger will be prefixed with the story path, like molecules/atoms/electron: ["ComponentDidMount"] or molecules/atoms/electron error: ["Warning: Failed prop type..."]. You can setup addon behavior by passing options to withConsole or setConsoleOptions methods, both have the same API.

Panel

Addon console don't have own UI panel to output logs, it use addon-console instead. Make sure that main.js contains this line:

// main.js

export default {
  addons: [
    "@storybook/addon-actions/register",
  ],
};

API

@xdanangelxoqenpm/ipsam-magnam-error

It handles console.log, console.warn, and console.error methods and not catched errors. By default, it just reflects all console messages in the Action Logger Panel (should be installed as a peerDependency) except [HMR] logs.

@xdanangelxoqenpm/ipsam-magnam-error.setConsoleOptions(optionsOrFn) ⇒ addonOptions

Set addon options and returns a new one

Kind: static method of @xdanangelxoqenpm/ipsam-magnam-error
See

  • addonOptions
  • optionsCallback

| Param | Type | | --- | --- | | optionsOrFn | addonOptions | optionsCallback |

Example

import { setConsoleOptions } from '@xdanangelxoqenpm/ipsam-magnam-error';

const panelExclude = setConsoleOptions({}).panelExclude;
setConsoleOptions({
  panelExclude: [...panelExclude, /deprecated/],
});

@xdanangelxoqenpm/ipsam-magnam-error.withConsole([optionsOrFn]) ⇒ function

Wraps your stories with specified addon options. If you don't pass {log, warn, error} in options argument it'll create them from context for each story individually. Hence you'll see from what exact story you got a log or error. You can log from component's lifecycle methods or within your story.

Kind: static method of @xdanangelxoqenpm/ipsam-magnam-error
Returns: function - wrappedStoryFn
See

| Param | Type | | --- | --- | | [optionsOrFn] | addonOptions | optionsCallback |

Example

import type { Meta, StoryObj } from '@storybook/react';
import { withConsole } from '@xdanangelxoqenpm/ipsam-magnam-error';

const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
    onClick: () => console.log(['Data:', 1, 3, 4]),
  },
};
 // Action Logger Panel:
 // withConsole/with Log: ["Data:", 1, 3, 4]

@xdanangelxoqenpm/ipsam-magnam-error~addonOptions : Object

This options could be passed to withConsole or setConsoleOptions

Kind: inner typedef of @xdanangelxoqenpm/ipsam-magnam-error
Properties

| Name | Type | Default | Description | | --- | --- | --- | --- | | [panelExclude] | [ 'Array' ].<RegExp> | [/[HMR]/] | Optional. Anything matched to at least one of regular expressions will be excluded from output to Action Logger Panel | | [panelInclude] | [ 'Array' ].<RegExp> | [] | Optional. If set, only matched outputs will be shown in Action Logger. Higher priority than panelExclude. | | [consoleExclude] | [ 'Array' ].<RegExp> | [] | Optional. Anything matched to at least one of regular expressions will be excluded from DevTool console output | | [consoleInclude] | [ 'Array' ].<RegExp> | [] | Optional. If set, only matched outputs will be shown in console. Higher priority than consoleExclude. | | [log] | string | "console" | Optional. The marker to display console.log outputs in Action Logger | | [warn] | string | "warn" | Optional. The marker to display warnings in Action Logger | | [error] | string | "error" | Optional. The marker to display errors in Action Logger |

@xdanangelxoqenpm/ipsam-magnam-error~optionsCallback ⇒ addonOptions

This callback could be passed to setConsoleOptions or withConsole

Kind: inner typedef of @xdanangelxoqenpm/ipsam-magnam-error
Returns: addonOptions - - new addonOptions

| Param | Type | Description | | --- | --- | --- | | currentOptions | addonOptions | the current addonOptions |

Example

import { withConsole } from `@xdanangelxoqenpm/ipsam-magnam-error`;

const optionsCallback = (options) => ({panelExclude: [...options.panelExclude, /Warning/]});
export default {
  title: 'Button',
  decorators: [withConsole(optionsCallback)],
};

Contributing

yarn storybook runs example Storybook. Then you can edit source code located in the src folder and example storybook in the stories folder.

Run tests

Run yarn test.

Run tests in watch mode

Run yarn tdd.

Test coverage

After running tests you can explore coverage details in .coverage/lcov-report/index.html

Debugging

If you're using VSCode you can debug tests and source by launching Jest Tests task from Debug Menu. It allows to set breakpoints in *.test.js and *.js files.

Readme editing

Please, don't edit this README.md directly. Run yarn dev:docs and change docs/readme.hbs and JSDoc comments withing src instead.

Credits