|
1 | | -# TSDX User Guide |
| 1 | +# yrb-actioncable |
2 | 2 |
|
3 | | -Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it. |
| 3 | +> A WebSocket provider for Y.js that works with ActionCable |
4 | 4 |
|
5 | | -> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`. |
| 5 | +## Installation |
6 | 6 |
|
7 | | -> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript) |
8 | | -
|
9 | | -## Commands |
10 | | - |
11 | | -TSDX scaffolds your new library inside `/src`. |
12 | | - |
13 | | -To run TSDX, use: |
| 7 | +With npm: |
14 | 8 |
|
15 | 9 | ```bash |
16 | | -npm start # or yarn start |
| 10 | +npm install yrb-actioncable |
17 | 11 | ``` |
18 | 12 |
|
19 | | -This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`. |
20 | | - |
21 | | -To do a one-off build, use `npm run build` or `yarn build`. |
22 | | - |
23 | | -To run tests, use `npm test` or `yarn test`. |
24 | | - |
25 | | -## Configuration |
26 | | - |
27 | | -Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly. |
28 | | - |
29 | | -### Jest |
30 | | - |
31 | | -Jest tests are set up to run with `npm test` or `yarn test`. |
| 13 | +With yarn: |
32 | 14 |
|
33 | | -### Bundle Analysis |
34 | | - |
35 | | -[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`. |
36 | | - |
37 | | -#### Setup Files |
38 | | - |
39 | | -This is the folder structure we set up for you: |
40 | | - |
41 | | -```txt |
42 | | -/src |
43 | | - index.tsx # EDIT THIS |
44 | | -/test |
45 | | - blah.test.tsx # EDIT THIS |
46 | | -.gitignore |
47 | | -package.json |
48 | | -README.md # EDIT THIS |
49 | | -tsconfig.json |
| 15 | +```bash |
| 16 | +yarn add yrb-actioncable --save |
50 | 17 | ``` |
51 | 18 |
|
52 | | -### Rollup |
53 | | - |
54 | | -TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details. |
55 | | - |
56 | | -### TypeScript |
57 | | - |
58 | | -`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs. |
| 19 | +## Usage |
59 | 20 |
|
60 | | -## Continuous Integration |
| 21 | +```typescript |
| 22 | +import {Doc} from "yjs"; |
| 23 | +import {WebsocketProvider} from "yrb-actioncable"; |
61 | 24 |
|
62 | | -### GitHub Actions |
63 | | - |
64 | | -Two actions are added by default: |
65 | | - |
66 | | -- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix |
67 | | -- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit) |
68 | | - |
69 | | -## Optimizations |
70 | | - |
71 | | -Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations: |
72 | | - |
73 | | -```js |
74 | | -// ./types/index.d.ts |
75 | | -declare var __DEV__: boolean; |
76 | | - |
77 | | -// inside your code... |
78 | | -if (__DEV__) { |
79 | | - console.log('foo'); |
80 | | -} |
| 25 | +const document = new Doc(); |
| 26 | +const provider = new WebsocketProvider( |
| 27 | + document, |
| 28 | + consumer, |
| 29 | + "SyncChannel", |
| 30 | + {path: "issues/1"} |
| 31 | +); |
81 | 32 | ``` |
82 | | - |
83 | | -You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions. |
84 | | - |
85 | | -## Module Formats |
86 | | - |
87 | | -CJS, ESModules, and UMD module formats are supported. |
88 | | - |
89 | | -The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found. |
90 | | - |
91 | | -## Named Exports |
92 | | - |
93 | | -Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library. |
94 | | - |
95 | | -## Including Styles |
96 | | - |
97 | | -There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. |
98 | | - |
99 | | -For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader. |
100 | | - |
101 | | -## Publishing to NPM |
102 | | - |
103 | | -We recommend using [np](https://github.com/sindresorhus/np). |
0 commit comments