Skip to content

Instantly share code, notes, and snippets.

@EdwardIrby
EdwardIrby / LICENSE
Last active Apr 22, 2019
yarn-completion
View LICENSE
MIT License
Copyright (c) 2016 Luke Childs, 2017 Ulysse Buonomo, 2019 Edward Irby
Copyright for portions of yarn-completion are held by Edward irby (2019) as
part of project zsh-better-npm-completion. All other copyright for project
yarn-completion held by Luke Childs (2016) and Ulysse Buonomo (2017).
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@EdwardIrby
EdwardIrby / framgenScript.js
Created Apr 10, 2019
alternative to createTemplate
View framgenScript.js
/**
* @param {(ShadowRoot|HTMLElement)} shadowRoot
* @param {...string} strings
*/
export const createFragment = (root, ...strings) => {
removeChildren(root);
const range = document.createRange();
range.setStart(root, 0);
return range.createContextualFragment(
[...strings]
@EdwardIrby
EdwardIrby / withBundle.js
Created Mar 19, 2019
@dxworks/rite puppeteer helper
View withBundle.js
/* eslint-disable no-shadow */
import multiEntry from 'rollup-plugin-multi-entry';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
const rollup = require('rollup');
export const withBundle = async (...entries) => {
const inputOptions = {
input: entries.length > 1
@EdwardIrby
EdwardIrby / tokens.js
Created Mar 8, 2019
Tokens.js a small utility function to make writing custom props a bit easier in js.
View tokens.js
/**
* @param {...{}} objs - object containing camelCased style properties or css custom properties
* @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
* @example Simple
* <Textblock style={tokens({
* lineHeight: 1.2,
* fontSize: rem(47.78),
* })} />
* @example Conditional Example
* <Textblock style={tokens(
@EdwardIrby
EdwardIrby / Textblock.css
Last active Mar 6, 2019
Textblock Component Example
View Textblock.css
.Textblock {
display: var(--display);
}
@EdwardIrby
EdwardIrby / App.jsx
Created Mar 5, 2018
Pulling the ShadowDom Component all together
View App.jsx
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value: props.value,
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { value } = e.target;
View LightDomUsage.jsx
export const LightDomUsage = (props) => {
return (
<ShadowDom lightDom={
() => (
<Fragment>
<span>I'm some light dom </span>
<span slot='span' className='text'>I'm some slottedlight dom </span>
</Fragment>
)
}>
@EdwardIrby
EdwardIrby / UsingShadowDom.jsx
Last active Mar 5, 2018
Any child wrapped by ShadowDom
View UsingShadowDom.jsx
export const BasicUsage = (props) => {
const { text } = props;
return (
<ShadowDom className={ className}>
<span>{ children }</span>
</ShadowDom>
)
}
@EdwardIrby
EdwardIrby / ShadowDom.js
Created Mar 5, 2018
A little Web Component in my React
View ShadowDom.js
import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';
export class ShadowDom extends Component {
constructor(props){
super(props)
this.getTargetRef = this.getTargetRef.bind(this);
}
componentDidMount() {
@EdwardIrby
EdwardIrby / javascript.yaml
Created Nov 13, 2017
Syntax highlighting es6 micro text editor
View javascript.yaml
filetype: javascript
detect:
filename: "(\\.js$|\\.es[5678]?$)"
header: "^#!.*/(env +)?node( |$)"
rules:
- constant.number: "\\b[-+]?([1-9][0-9]*|0[0-7]*|0x[0-9a-fA-F]+)([uU][lL]?|[lL][uU]?)?\\b"
- constant.number: "\\b[-+]?([0-9]+\\.[0-9]*|[0-9]*\\.[0-9]+)([EePp][+-]?[0-9]+)?[fFlL]?"
- constant.number: "\\b[-+]?([0-9]+[EePp][+-]?[0-9]+)[fFlL]?"
You can’t perform that action at this time.