Skip to content

A simple component to log the contents of a variable to the screen. Think of it as console.log for the UI.

Notifications You must be signed in to change notification settings

michaelpumo/screen

Repository files navigation

Screen

A simple component to log the contents of a variable to the screen.
Think of it as console.log for the UI.


Screen


Features

  • 💻 Log simple or complex values to the screen, in-place.
  • 📋 See the types, lengths and structure of your data.
  • 🌤️ Easily set light and dark modes (based on Dracula and Atom One Light themes).
  • 👻 Expand and collapse objects and arrays.
  • 🏷️ Custom label to make logging easier.
  • ✨ Ability to set max-length and max-depth on the arrays and objects you want to display.
  • 💥 Highlight outline to nested data, on hover.
  • 🤗 Rendered into a semantic HTML <table>.

Important

This project is under active development and may go through significant changes. Early users greatly appreciated for feedback, advice and suggestions 🙏


Install

npm i @michaelpumo/screen --save-dev

Frameworks

Vue Setup Vue Setup

Vue Demo

StackBlitz Demo Vue

Import the stylesheet into your main CSS file.

@import '@michaelpumo/screen/app.css';
Nuxt Setup Nuxt Setup

Nuxt Demo

StackBlitz Demo Nuxt

Import the stylesheet into your main nuxt.config.{js,ts} file.

export default defineNuxtConfig({
  css: ['@michaelpumo/screen/app.css']
});

You may also find it useful to have Nuxt auto-import the component, so that you can use it freely around your application without manually importing everywhere you need it. You can do this by creating a simple module that imports it for you automatically.

modules/screen.ts

import { addComponent, defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup() {
    addComponent({
      name: 'Screen',
      filePath: '@michaelpumo/screen/vue',
      mode: 'client',
    });
  },
});

Make sure you have auto component import enabled in your nuxt.config.{js,ts} file too:

export default defineNuxtConfig({
  css: ['@michaelpumo/screen/app.css'],
  components: true,
});

Note If you do not want to auto import this component (though it's recommended) then you may need to wrap <Screen /> into a <ClientOnly> tag to avoid warnings with SSR:

<template>
  <ClientOnly>
    <Screen :log="profile" label="My Profile" />
  </ClientOnly>
</template>
React Setup React Setup

React Demo

There is no React port yet. Coming soon.

Example Usage (Vue + Nuxt)

<script lang="ts" setup>
import Screen from '@michaelpumo/screen/vue'

const profile = {
  name: 'Michael',
  age: 40,
  children: false,
  about: {
    job: 'Web Developer',
    hobbies: ['hiking', 'cooking', 'guitar'],
    tagline: `I'm a freelance user interface developer.`
  }
}
</script>

<template>
  <Screen :log="profile" label="My Profile" />
</template>

Props

Name Type Default Description
log unknown undefined The variable to log to the screen.
label string 'Screen Log' The label to display at the top of the screen.
mode 'light' | 'dark' 'dark' Set the appearance of the log.
max-length number Number.POSITIVE_INFINITY The maximum length of arrays and object keys to display.
max-depth number Number.POSITIVE_INFINITY The maximum depth of the tree to display.

Motivation

I simply wanted something that functioned slightly better than a basic <pre> tag for logging to the screen. 🤷🏻‍♂️ Feel free to share your thoughts on how this concept can be improved.

Requirements

  • Vue 3+

Future

  • Make ports for React and Svelte etc.

About

A simple component to log the contents of a variable to the screen. Think of it as console.log for the UI.

Resources

Stars

Watchers

Forks

Packages

No packages published