Skip to content

Instantly share code, notes, and snippets.

View DanAlvares's full-sized avatar

Dan Alvares DanAlvares

View GitHub Profile
@DanAlvares
DanAlvares / jsx.ts
Last active April 1, 2021 15:33
JSX function - Use HTML in .ts(x) files instead of template strings
const JSX = {
createElement(name: string, props: { [id: string]: string }, ...content: string[]) {
props = props || {};
const propsstr = Object.keys(props)
.map(key => {
const value = props[key];
if (key === "className") return `class="${value}"`;
else return `${key}="${value}"`;
})
.join(" ");
/**
* __EXAMPLE__
* <element-name>
* <span slot="slot-1">Projected content</span>
* </element-name>
*/
const HTMLTemplate = `
<style></style>
<slot name="slot-1">Default content</slot>
@DanAlvares
DanAlvares / bind-web-components.directive.js
Created December 13, 2018 21:23
An AngularJS directive that enables binding to vanilla web components to allow for AngularJS expressions in custom attributes.
angular.module('webComponents', []).
directive('bindWebComponent', ['$parse', function ($parse) {
return {
restrict: 'A',
scope: false,
compile: function bindWebComponentCompile($element, $attr) {
var attrMap = {};
for (var prop in $attr) {
var dash_prop = prop.
@DanAlvares
DanAlvares / request.js
Created November 22, 2018 12:39
A wrapper around the fetch API that applies defaults and assumes JSON response
async function request (endpoint, options = {}) {
const response = await fetch(endpoint, {
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
},
...options,
});
return response.json();
@DanAlvares
DanAlvares / dockerfile
Last active November 18, 2020 11:45
A multistage build dockerfile template for Frontend frameworks
### STAGE 0: Build ###
FROM node:8.9.0 as builder
RUN mkdir -p /home/app
WORKDIR /home/app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run lint
RUN npm run test:ci
RUN npm run build --prod