Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Carlos Rojas carlosrojaso

🎯
Focusing
View GitHub Profile
View webpack.config.js
var path= require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
library: 'simpleErrorComponent',
libraryTarget: 'umd'
}
View App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<error-component>Esto en un mensaje</error-component>
<error-component :kind="warning">Esto en un mensaje</error-component>
<error-component :kind="error">Esto en un mensaje</error-component>
</div>
</template>
<script>
View App.js
import React from 'react';
import 'simple-error-component';
function App() {
return (
<div className="App">
<error-component>Esto en un mensaje</error-component>
<error-component kind="warning">Esto en un mensaje</error-component>
<error-component kind="error">Esto en un mensaje</error-component>
</div>
View app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<h2>Error Component</h2>
<error-component>Default Message</error-component>
<error-component [attr.kind]="warning">Warning Message</error-component>
<error-component [attr.kind]="error">Error Message</error-component>
View app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import 'simple-error-component';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
View index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://unpkg.com/browse/@webcomponents/webcomponentsjs@2.4.3/webcomponents-bundle.js"></script>
<script async src="./dist/index.js"></script>
</head>
<body>
<h2>Error Component</h2>
View error-component.js
class ErrorComponent extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: 'open'});
this.templates = document.createElement('div');
this.container = document.createElement('div');
this.root.appendChild(this.templates);
this.root.appendChild(this.container);
this.templates.innerHTML = ErrorComponent.template();
const kind = this.getAttribute(`kind`) || `none`;
View index.js
export * from './error-component';
View package.json
{
"name": "simple-error-component",
"version": "1.0.1",
"description": "Simple Error Component",
"main": "dist/index.js",
"module": "src/index.js",
"directories": {
"src": "src"
},
"scripts": {
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<error-component>Default Message</error-component>
<error-component kind="warning">Warning Message</error-component>