Skip to content

Instantly share code, notes, and snippets.

View inakianduaga's full-sized avatar

Inaki Anduaga inakianduaga

View GitHub Profile
@inakianduaga
inakianduaga / strictCustomEvent.ts
Created October 2, 2018 16:15
Typesafe CustomEvents on your Frontend - StrictCustomEvent proxy
export const strictCustomEvent = <
T extends keyof Omit<DocumentEventMap, defaultDocumentEventNames>,
D extends UnpackCustomEventPayload<DocumentEventMap[T]>
>(
name: T,
payload: Omit<CustomEventInit<D>, "detail"> & {
detail: D
}
): CustomEvent<D> => new CustomEvent(name, payload)
@inakianduaga
inakianduaga / lib.dom.d.ts
Last active October 4, 2018 06:33
Typesafe CustomEvents on your Frontend - Standard lib CustomEvent constructor
// https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L3307
declare var CustomEvent: {
prototype: CustomEvent;
new <T>(typeArg: string, eventInitDict?: CustomEventInit<T>): CustomEvent<T>;
};
@inakianduaga
inakianduaga / globalAugmentationExample.ts
Created October 2, 2018 16:07
Typesafe CustomEvents on your Frontend - CustomEvent global augmentation example
export const ClassifiedListFilterUpdate = "CL_FILTER_UPDATE";
export type ClassifiedListFilterUpdate = {
searchUrls: {
/**
* Search url with legacy parameters
*/
legacy: string;
/**
* Search url with newer `mmm` parameters
*/
@inakianduaga
inakianduaga / lib.dom.d.ts
Last active October 4, 2018 06:33
Typesafe CustomEvents on your Frontend - standard library section
// lib.dom.d.ts section
// https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L4450
addEventListener<K extends keyof DocumentEventMap>(
type: K,
listener: (this: Document, ev: DocumentEventMap[K]) => any,
options?: boolean | AddEventListenerOptions
): void;
@inakianduaga
inakianduaga / producingExample.ts
Created October 2, 2018 15:51
Typesafe CustomEvents on your Frontend - Production Example
// somewhere in another app...
import { ListPage, strictCustomEvent } from "@autoscout24/custom-events";
document.dispatchEvent(
strictCustomEvent(ListPage.ClassifiedListTotalCountUpdate, {
detail: {
totalCount: 42
}
})
);
@inakianduaga
inakianduaga / listeningExample.ts
Last active October 2, 2018 15:49
Typesafe CustomEvents on your Frontend - Listening Example
// somewhere in your app...
import { ListPage } from "@autoscout24/custom-events";
document.addEventListener(ListPage.ClassifiedListFilterUpdate, e =>
console.log(e.detail.searchUrls.standard)
);
@inakianduaga
inakianduaga / middleware.ts
Last active August 16, 2018 16:54
Redux for vanillaJS Medium.com article - Redux gallery middleware
import * as Redux from "redux";
import Config from "./config"; // some config
import { State } from "../../store/rootReducer";
import * as actions from "./actions";
import { listeners as domListeners, mutations as domMutations } from "./dom";
/**
* Middleware to schedule dom mutations based on redux actions / state changes
*/
export const middleware = (_: Config) => (
@inakianduaga
inakianduaga / main.scala.html
Last active August 16, 2018 17:03
Redux for vanillaJS Medium.com article - Scala Play backend view
@()
<div id="some-dom-id" class="gallery">
<h5>Redux Example </h5>
<div class="image-wrapper">
@* Generate list of random images for demo purposes *@
@for(i <- 1 to 5) {
<img src="https://source.unsplash.com/random/300x300?sig=@{i}" />
}
</div>
@inakianduaga
inakianduaga / filestructure.md
Created August 14, 2018 16:10
Redux for vanillaJS Medium.com article - File structure
ui/src/
      /entrypoints/main.ts
      /store/configureStore.ts
            /rootReducer.ts
      /components/gallery/
                         /actions.ts
                         /gallery.scss
                         /dom.ts
 /middleware.ts
@inakianduaga
inakianduaga / dom.ts
Last active August 16, 2018 16:57
Redux for vanillaJS Medium.com article - DOM bridge
// Some CSS styles for our component
import "./gallery.scss";
/**
* DOM mutations. Include all DOM manipulation for this component here
*/
export const mutations = {
select: (index: number) => {
mutations.clearSelected();
const images = elements.images();