Skip to content

Commit

Permalink
Get jsxImportSource working, move to yarn to get TS 4.x
Browse files Browse the repository at this point in the history
  • Loading branch information
stephenh committed Mar 9, 2021
1 parent b1376f4 commit 86b68fb
Show file tree
Hide file tree
Showing 7 changed files with 15,932 additions and 28,677 deletions.
52 changes: 9 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,51 +10,35 @@ There are a few ways to run the application each with its own advantage.

```bash
# Only when running for the first time to install dependencies for Beam & Truss
> npm i && cd ./truss && npm i
> yarn i && cd ./truss && npm i

# Easiest way to start.
# This runs Storybook and Truss/Beam automatic build process
> npm start
> yarn start

# Alternatively Beam/Truss automatic build process can be started independently from storybook by using two terminals.
> npm run watch
> npm run storybook
> yarn watch
> yarn storybook

# Lastly, the following three commands can be used to achieve the same result.
# This makes the console output easier to read
> npm run watch:beam
> npm run watch:truss # Only required if any ./truss/*.ts files will be altered
> npm run storybook
> yarn watch:beam
> yarn watch:truss # Only required if any ./truss/*.ts files will be altered
> yarn storybook
```

## Commands

### `> npm run watch:beam`
### `> yarn watch:beam`

Builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

### `> npm run storybook`
### `> yarn storybook`

This loads the stories from `./stories`.

> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
## Example Application

Then run the example application:

```bash
cd example
npm i # or yarn to install dependencies
npm start # or yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).

To do a one-off build, use `npm run build` or `yarn build`.

To run tests, use `npm test` or `yarn test`.

## Configuration

Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
Expand Down Expand Up @@ -118,21 +102,3 @@ if (__DEV__) {

You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.

## Usage with Lerna

When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.

The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.

Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.

```diff
"alias": {
- "react": "../node_modules/react",
- "react-dom": "../node_modules/react-dom"
+ "react": "../../../node_modules/react",
+ "react-dom": "../../../node_modules/react-dom"
},
```

An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)
Loading

0 comments on commit 86b68fb

Please sign in to comment.