---
# System prepended metadata

title: Module Authoring Requirements

---

# 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
