Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Mateus Vahl mateusvahl

🏠
Working from home
View GitHub Profile
@mateusvahl
mateusvahl / Box.tsx
Last active Dec 7, 2021
React / Typescript Dynamic tag with intellisense autocomplete
View Box.tsx
import { ReactNode, ElementType, ComponentPropsWithoutRef } from "react";
export type Prefer<P, T> = P & Omit<T, keyof P>;
export type ElementPropsWithoutRef<T extends ElementType> = Pick<
ComponentPropsWithoutRef<T>,
keyof ComponentPropsWithoutRef<T>
>;
export type OverwritableType<OwnProps, Type extends ElementType> = Prefer<
View gist:d71eb727410e76886930a22f8b252bae
{
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
View gist:08e462c8d0f9f6d5b6c8500301c2142e
#181E24,#121016,#4AAADA,#313943,#313943,#B7C5D3,#4AAADA,#4AAADA,#13181B,#A0B3C6
View VSCode config.txt
{
"editor.fontFamily": "Inconsolata-Regular, Consolas, 'Courier New', monospace",
"editor.selectionHighlight": false,
"editor.fontSize": 14,
"editor.renderWhitespace": "none",
"editor.cursorStyle": "line",
"editor.multiCursorModifier": "ctrlCmd",
"editor.wordWrap": "off",
"editor.accessibilitySupport": "off",
"editor.cursorBlinking": "smooth",
View parse_tag_expression.js
const parseElementExpression = (str) => {
const elements = /([\#|\.][a-zA-Z]+)/;
const itens = str.split(elements).filter(x => x);
const getClassOrIdNames = (idOrClass) =>
itens
.filter(_ => _.charAt(0) === idOrClass)
.map(_ => _.slice(1));
const tag = itens.filter(_ => (_.charAt(0) !== '#') && (_.charAt(0) !== '.'));
const id = getClassOrIdNames('#');
@mateusvahl
mateusvahl / gist:12c7579ed40abe5d2ff0b821b5b2cc01
Created Aug 21, 2017
Javascript html structure like hiccup
View gist:12c7579ed40abe5d2ff0b821b5b2cc01
// http://ramdajs.com/repl/#?const%20parseAttributes%20%3D%20pipe%28%0A%20%20toPairs%2C%0A%20%20map%28%28%5Bkey%2C%20val%5D%29%20%3D%3E%20val%20%3F%20%60%24%7Bkey%7D%3D%22%24%7Bval%7D%22%60%20%3A%20key%29%2C%0A%20%20join%28%27%20%27%29%0A%29%3B%0A%0Aconst%20render%20%3D%20%28%5Btag%2C%20...rest%5D%29%20%3D%3E%20%7B%0A%20%20if%28%21tag%29%20return%3B%0A%20%20%0A%20%20var%20attributes%20%3D%20rest%5B0%5D%3B%0A%20%20var%20body%20%3D%20rest.slice%281%29%3B%0A%20%20%0A%20%20if%28Array.isArray%28attributes%29%20%7C%7C%20is%28String%2C%20attributes%29%29%20%7B%0A%20%20%20%20body%20%3D%20%5Battributes%2C%20...rest.slice%281%29%5D%3B%0A%20%20%20%20attributes%20%3D%20%7B%7D%3B%0A%20%20%20%7D%0A%20%20%20%0A%20const%20attributesRendered%20%3D%20parseAttributes%28attributes%29%3B%0A%20const%20a%20%3D%20attributesRendered%20%3F%20%27%20%27%20%2B%20attributesRendered%20%3A%20%27%27%3B%0A%20const%20b%20%3D%20body.map%28_%20%3D%3E%20is%28String%2C%20_%29%20%3F%20_%20%3A%20render%28_%29%29.join%28%27%27%29%3B%0A%20%20%0A%20ret
View find_css_selectors_not_used.rb
#!/usr/bin/env ruby
#require "./selector_cleaner/version"
require "nokogiri"
module Selector
# Returns a array of elements that match with the css selector
# Params:
# +selector+:: CSS selector to be found
# +html+:: File to be searched
def self.find(selector, html)
View gist:6398b14b419e64c40ca9f247c7dd7638
handlebars.createHelper('>>', function(partial, context) {
var html = handlebars.partials[partial];
delete this.styleModifier
var template = handlebars.compile(html)(Object.assin({}, this, context.hash));
return handlebars.SafeString(template);
});
View gist:1d9409bf28865522a89a283da3133e98
var pattern = name;
var outlet = new Handlebars.SafeString(options.fn(this));
var params = Object.assign(options.hash, {outlet: outlet});
var template = Handlebars.compile(`{{> ${name} }}`);
return template(params);
View Txt
Writes a new render engine:
{(yields}} can be implemented with helpers.
{{content_for}} and {{output_for}} can be implemented with helpers and state.
{{docs}} can be implemented with helpers+state+blocks, also use handlebars to output default cars in doc.
{{metadata}} can be implemented with helpers in a before render step.
{{lorem 1000}} writes 1000 lines of lorem ipsum
final step: check for patterns not used