Offirmo

/////////////////////////////////////////////////
// __dirname, __filename
// https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#pure-esm-package
// https://nodejs.org/api/globals.html
import * as path from 'node:path'
import { fileURLToPath } from 'node:url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

Offirmo

AwesomeKaleGleaner


function grid(seedCount) {
    const s = Math.sqrt(seedCount)
    const res = [ Math.floor(s) , Math.ceil(s) ]
    if (res[0] * res[1] < seedCount )
        res[0]++
        
    return res

Offirmo

import { 
	State,
	set_age,
} from './state.ts'


const state: State = { ... }

// currying
const curried1_set_age = change_age.bind(null, state) // hard to read

Offirmo

<!-- https://devdocs.io/html/element/a -->
<a href="https://github.com/Offirmo/offirmo-monorepo/issues" target="_blank" rel="noopener,external">report here</a>

Offirmo

import EventEmitter from 'emittery'

const EMITTER_EVT = 'change'

const emitter = new EventEmitter<{ [EMITTER_EVT]: string }>()

emitter.emit(EMITTER_EVT, `[in-mem]`)
const unbind = emitter.on(EMITTER_EVT, (src: string) => { ... })

Offirmo

// https://storybook.js.org/basics/guide-react/#write-your-stories
// https://storybook.js.org/basics/writing-stories/

// "Component Story Format"
// https://storybook.js.org/docs/react/api/csf

import { Story, Meta } from '@storybook/react'

import HelloWorld, { HelloWorldProps } from '.'

Offirmo

import React, { Component } from "react";

//////////////////////////////////////////////////////////////////

// https://reactjs.org/blog/2018/10/23/react-v-16-6.html
// https://reactjs.org/docs/react-api.html#reactmemo
// XXX be careful of render props! https://reactjs.org/docs/render-props.html#be-careful-when-using-render-props-with-reactpurecomponent

const MyComponent = React.memo(
  function MyComponent(props) {

Offirmo

// +++helper types
// https://github.com/sindresorhus/type-fest#built-in-types
// https://www.typescriptlang.org/docs/handbook/2/typeof-types.html
function f(x, y) {
  return { x: y, y: x }
}
type R = ReturnType<typeof f> – Obtain the return type of a function type.
type P1 = Parameters<typeof f>[0]
type Node = Parameters<JSON['stringify']>[0]  // JSON.stringify

Offirmo

	
/// event delegation
//document.addEventListener('change', event => {
document.addEventListener('click', event => {
  try {
    const { target: clickedElement } = event
    if (!clickedElement)
      throw new Error('click event has no target!')
    if (clickedElement.matches(`#create-issue-dialog #$uuu input`))
      foo()

Offirmo

/*
https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
http://bradfrost.com/blog/post/atomic-web-design/#atoms
zqsmm.qiniucdn.com/data/20110511083224/index.html
*/

.block {}
.block__element {}
.block--modifier {}