# Module Authoring Requirements

1. One TS file can import another TS file without building it first
- Remove deeply nested dist imports (*/lib/*)
- **SOLVED** Remove SASS imports
- **RESOLUTION**:
Use separate package name, solves internal issues and enables more predictability/stability for users.
`import { makeMergeProps } from '@fluentui/react-compose';`
`import { makeMergeProps } from '@fluentui/react-compose-next';`

1. No side-effects
- **SOLVED** Example, remove top-level loadStyles() code executed on import/parse. Can move to first render.
- **TODO** Another example, setting the version globally on the window for debug. This also could be moved to the mount/render/init phase of some core piece of the library.
- **TODO** Require use of PURE annotation for React components. Not available in TS compiler but is solved in Babel.

## Component Directory Complexity

Simplify folder and import structures, current:

react-flex
  /src
    index.ts           --->      ./Flex
    Flex.ts            --->      ./components/Flex/index
    /components
      /Flex            --->      ./Flex
        index.ts       --->      ./Flex
        Flex.tsx       --->      Component Code
  /lib
    Flex.js            --->      ./components/Flex
    index.js           --->      ./Flex
    /components
      /Flex
        Flex.js        --->      Component Code
        index.js       --->      ./Flex

Curent resolution:

import { Flex } from 'react-flex'
  --> react-flex/lib/index.js
    --> react-flex/lib/Flex.js
      --> react-flex/lib/components/Flex/index.js
        --> react-flex/lib/components/Flex/Flex.js

Proposed resolution:

import { Flex } from 'react-flex'
  --> react-flex/lib/index.js
    --> react-flex/lib/Flex/Flex.js