Carlos Rojas carlosrojaso

🎯

Focusing

Software Engineer

carlosrojaso / index.html

Last active September 30, 2020 12:11

Step 4

	<!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>

carlosrojaso / index.html

Last active September 30, 2020 12:11

Step 5

	<!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>

carlosrojaso / package.json

Created October 2, 2020 11:51

	{
	"name": "simple-error-component",
	"version": "1.0.1",
	"description": "Simple Error Component",
	"main": "dist/index.js",
	"module": "src/index.js",
	"directories": {
	"src": "src"
	},
	"scripts": {

carlosrojaso / index.js

Created October 2, 2020 12:15

export * from './error-component';

carlosrojaso / error-component.js

Created October 2, 2020 12:16

	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`;

carlosrojaso / index.html

Created October 2, 2020 12:25

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script async src="https://unpkg.com/browse/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
	<script async src="./dist/index.js"></script>
	</head>
	<body>

	<h2>Error Component</h2>

carlosrojaso / app.module.ts

Created October 2, 2020 12:30

	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
	],

carlosrojaso / app.component.html

Created October 5, 2020 12:25

	<!--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>

carlosrojaso / App.js

Created October 5, 2020 12:28

	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>

carlosrojaso / App.vue

Created October 5, 2020 12:30

	<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>