Skip to content

Instantly share code, notes, and snippets.

View bitflower's full-sized avatar

Matthias Max bitflower

View GitHub Profile
@maxjustus
maxjustus / as-source.tsx
Created November 5, 2020 23:37
A stencil functional component for rendering the children element's markup in a <code> element along side the rendered jsx
import { h, ChildNode, FunctionalComponent, FunctionalUtilities } from "@stencil/core";
function vnodeToSource(elem: ChildNode, utils: FunctionalUtilities, output = "", level = 0): string {
if (elem.vchildren) {
let childOutput: string[] = [];
utils.forEach(elem.vchildren, (child) => {
childOutput.push(vnodeToSource(child, utils, output, level + 1));
});
@jdnichollsc
jdnichollsc / animatable-component.html
Last active February 16, 2022 09:10
Animatable Components using Higher Order Component (HOC) with StencilJS 🙌 - https://proyecto26.github.io/animatable-component
<animatable-component
autoplay
easing="ease-in-out"
duration="800"
delay="300"
animation="zoomIn"
iterations="Infinity"
direction="alternate"
>
<h1>Hello World</h1>
@StefanNieuwenhuis
StefanNieuwenhuis / reactiveconf-framework-independent-components-library-with-StencilJS.md
Last active September 23, 2020 12:55
How to build a framework independent component library with StencilJS

How to build a framework independent component library with StencilJS

This is a proposal for a lightning talk at Reactive Conf. Please 🌟 this gist to push the proposal! If you're on your phone, please request the 🖥 desktop site to star this gist 😇 #ReactiveConf

@heygrady
heygrady / render-props.md
Last active March 22, 2024 13:12
Avoiding HOC; Favoring render props
@markerikson
markerikson / appEntryPoint.js
Last active August 1, 2022 07:41
Webpack React/Redux Hot Module Reloading (HMR) example
import React from "react";
import ReactDOM from "react-dom";
import configureStore from "./store/configureStore";
const store = configureStore();
const rootEl = document.getElementById("root");
@hoschi
hoschi / SagaManager.js
Created May 11, 2016 16:56
Hot reloadable redux-saga ... sagas
import mySaga from 'mySaga';
import { take, fork, cancel } from 'redux-saga/effects';
const sagas = [mySaga];
export const CANCEL_SAGAS_HMR = 'CANCEL_SAGAS_HMR';
function createAbortableSaga (saga) {
if (process.env.NODE_ENV === 'development') {
return function* main () {
@CamdenSegal
CamdenSegal / custom-endpoints.php
Created October 11, 2014 03:38
WP_JSON_CustomPostType Endpoint Generation
class MAP_API_DemoItemType extends WP_JSON_CustomPostType {
protected $base = '/map/demo';
protected $type = 'demo';
public function register_routes( $routes ) {
$routes = parent::register_routes( $routes );
return $routes;
}
}
@codfish
codfish / uiEqualHeights.js
Last active February 12, 2018 09:02
AngularJS Equal Height columns directive.
'use strict';
/**
* Equal Heights
*
* Attach this directive to the parent/wrapping element of
* a bunch of elements that are columns. This directive will
* calculate the height of every direct child (one level down)
* then set all of them to be the height of the tallest one.
*
@fdidron
fdidron / vanilla-preloader
Last active August 29, 2015 14:04
Removing JQuery's dependency from the preloading image with promises code described here : http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm
loadImageLocation: function loadImageLocation(imageLocation) {
var preloader = this;
var _onLoadHandler = function(event) {
// Since the load event is asynchronous, we have to
// tell AngularJS that something changed.
$rootScope.$apply(
@nelsonpecora
nelsonpecora / trusthtml.js
Created May 22, 2014 17:03
Custom filter to trust all html. WARNING: Use with caution. Don't use when displaying user-created content.
app.filter('trusthtml', ['$sce', function ($sce) {
return function(t) {
return $sce.trustAsHtml(t)
}
}]);