flexbox-ts-instance-generator.js

'use strict'

/*
  描述:
   Flexbox Grid(http://flexboxgrid.com/) 这个 css 库的 ts 生成器. 用于 React 使用 felxboxgrid.
   比 react-flexbox-grid 简单粗暴, 不需要 webpack 就能用, 不需要编译一堆东西. 并且由于生成的是静态代码, 效率还要更高, 无论编译时还是运行时.

  使用:
    node generate.js > target.tsx


    import {Row, Col} from './target'

    <Grid>
      <Row between_xs>
        <Col xs_3> Hello </Col>
        <Col xs_3> World </Col>
      </Row>
    <Grid>

  Api
   Col: 
    col-xs 对应 sx
    col-xs-nu 对应 xs_nu
    col-xs-offset-nu 对应 xs_offset-nu

    其他都是 xxx-xxx-xxx 对应 xxx_xxx_xxx

  Row:
    和上面类似, 但是 row 是默认会加上的, 所以不用自己手动加

  Grid:
    fluid 只有这一个属性

*/

// container
// container-fluid

// row
// ${align}-${size}
// ${distribute}-${size}
// reverse

// col-${size`}
// col-${size}-${nu}
// col-${size}-offset-${nu}
// ${recorder}-${size}

const range = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const sizes = ['xs', 'sm', 'md', 'lg']
const aligns = ['start', 'center', 'end', 'top', 'middle', 'bottom']
const distributes = ['around', 'between']
const recorders = ['first', 'last']

console.log(`'use strict'`)
console.log(`import * as React from 'react'`)

// GridOpts interface
console.log(`interface GridProps { 
  fluid?: boolean 
}`)

// GridPropsMap
console.log(`
const GridPropsMap: {[propNames: string]: string} = { 
  fluid: 'container-fluid' 
}
`)

// RowProps interface
console.log('interface RowProps {')
for (const size of sizes) {
  for (const align of aligns) {
  // ${align}-${size}
  console.log(`  ${align}_${size}?: boolean`)
  }
  for (const distribute of distributes) {
  // ${distribute}-${size}
  console.log(`  ${distribute}_${size}?: boolean`)
  }
}
// reverse
console.log('  reverse?: boolean')
console.log('}')

// RowPropsMap interface
console.log('const RowPropsMap: {[propNames: string]: string} = {')
for (const size of sizes) {
  for (const align of aligns) {
  // ${align}-${size}
    console.log(`  ${align}_${size}: '${align}-${size}'`, ',')
  }
  for (const distribute of distributes) {
  // ${distribute}-${size}
    console.log(`  ${distribute}_${size}: '${distribute}-${size}'`, ',')
  }
}
// reverse
console.log(`  reverse: 'reverse'`)
console.log('}')

// ColProps interface
console.log('interface ColProps {')
for (const size of sizes) {
  // col-${size}
  console.log(`  ${size}?: boolean`)
  for (const nu of range) {
    // col-${size}-${nu}
    console.log(`  ${size}_${nu}?: boolean`)
    // col-${size}-offset-${nu}
    console.log(`  ${size}_offset_${nu}?: boolean`)
  }
  for (const recorder of recorders) {
    // ${recorder}-${size}
    console.log(`  ${recorder}_${size}?: boolean`)
  }
}
// reverse
console.log('  reverse?: boolean')
console.log('}')

// ColPropsMap
console.log('const ColPropsMap: {[propNames: string]: string} = {')
for (const size of sizes) {
  // col-${size}
  console.log(`  ${size}: 'col-${size}'`, ',')
  for (const nu of range) {
    // col-${size}-${nu}
    console.log(`  ${size}_${nu}: 'col-${size}-${nu}'`, ',')
    // col-${size}-offset-${nu}
    console.log(`  ${size}_offset_${nu}: 'col-${size}-offset-${nu}'`, ',')
  }
  for (const recorder of recorders) {
    // ${recorder}-${size}
    console.log(`  ${recorder}_${size}: '${recorder}-${size}'`, ',')
  }
}
// reverse
console.log(`  reverse: 'reverse'`)
console.log('}')


console.log(`
type NativeProp = React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDivElement>, HTMLDivElement>

${['Grid', 'Row', 'Col'].map(name => `
export function ${name}(_props: ${name}Props & NativeProp): JSX.Element {
  let className = '${{'Grid': 'container', 'Row': 'row', 'Col': 'col-xs'}[name]}'
  const props = _props as any
  const native_prop: any = {}
  for (const key of Object.getOwnPropertyNames(props)) {
    if (props[key] === true) {
      className += (' ' + ${name}PropsMap[key])
    } else {
      if (key === 'className') {
        className += (' ' + props[key])
      } else {
        native_prop[key] = props[key]
      }
    }
  }
  return React.createElement('div', { ...native_prop, className })
}
`).join('')}

export function Box(_props: NativeProp): JSX.Element {
  return Row({ ..._props, children: Col({ children: _props.children }) })
}
`)