Shay Davidson ShayDavidson

eBay Israel Social Center's Marionette Extensions

This document is a summary of the convention we harnesed in the eBay Israel Social Center (ISC) for client-side development. It is built upon Backbone.Marionette and relies heavily on its Application, Module, Controller and AppRouter objects. We extended these classes with syntactic sugar, bootstrapping and other features we needed in order to simplify the way we work.

NOTE: The extensions were built up until v1.0.0-rc2 and do not include (yet) the Backbone update changes (we are still using EventBinders for example).

We used Marionette with our extensions to build the StubHub 'Go With Friends' service. The service allows users to arrange group events, invite friends, see who's in, and decide on the best tickets for everyone.

Some examples:

	import { useCallback, useEffect, useRef, MutableRefObject } from 'react';

	export interface UseGameLoopOptions {
	shouldPauseOnBlur?: boolean;
	shouldResumeOnFocus?: boolean;
	}

	export interface GameLoopContext {
	state: MutableRefObject<'playing' \| 'paused' \| 'stopped'>;
	start: () => void;

	{
	"builders": {
	"rollup": {
	"implementation": "./impl",
	"schema": "./schema.json",
	"description": "Custom rollup executor"
	}
	}
	}

	// HOW TO USE:
	// 1. copy the code below into a new file (e.g. `jest.fixCoverage.js`).
	// 2. In your `jest.config.js`, have this for the `transform` config:
	// transform: { '^.+\\.[tj]sx?$': '<rootDir>/jest.fixCoverage.js' },

	const { default: tsJest } = require('ts-jest')

	module.exports = fixIstanbulDecoratorCoverageTransformer()

	function fixIstanbulDecoratorCoverageTransformer() {

	/* eslint-disable @typescript-eslint/ban-types */

	export type CamelToSnake<T extends string> = string extends T
	? string
	: T extends `${infer C0}${infer R}`
	? `${C0 extends Uppercase<C0> ? '_' : ''}${Lowercase<C0>}${CamelToSnake<R>}`
	: '';

	export type SnakeToCamelCase<S extends string> = S extends `${infer P1}_${infer P2}${infer P3}`
	? `${Lowercase<P1>}${Uppercase<P2>}${SnakeToCamelCase<P3>}`

	import { useMemo } from 'react';
	import { easing } from 'ts-easing';
	import { useTween } from 'react-use';
	import { clampedInverseLerp, lerp } from '../utils/math';

	export type EasingName = keyof typeof easing;

	export interface Animation {
	from: number;
	to: number;

	# Your init script
	#
	# Atom will evaluate this file each time a new window is opened. It is run
	# after packages are loaded/activated and after the previous editor state
	# has been restored.
	#
	# An example hack to log to the console when each text editor is saved.
	#
	# atom.workspace.observeTextEditors (editor) ->
	# editor.onDidSave ->