f9ed1bf2c9
Typescript's type aliases (`type X = thing`) can refer to basically
anything, which makes it hard to write an automatic document formatter
for them. Interfaces on the other hand are only object, so they play
much nicer with docs. Currently, object-flavoured type aliases don't
really get expanded at all on our docs site, which means we have a bunch
of docs content that's not shown on the site.
This diff introduces a lint rule that forces `interface X {foo: bar}`s
instead of `type X = {foo: bar}` where possible, as it results in a much
better documentation experience:
Before:
<img width="437" alt="Screenshot 2024-05-22 at 15 24 13"
src="https://github.com/tldraw/tldraw/assets/1489520/32606fd1-6832-4a1e-aa5f-f0534d160c92">
After:
<img width="431" alt="Screenshot 2024-05-22 at 15 33 01"
src="https://github.com/tldraw/tldraw/assets/1489520/4e0d59ee-c38e-4056-b9fd-6a7f15d28f0f">
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import { Page, test as base } from '@playwright/test'
|
|
import { EndToEndApi } from '../../../src/misc/EndToEndApi'
|
|
import { ActionsMenu } from './menus/ActionsMenu'
|
|
import { HelpMenu } from './menus/HelpMenu'
|
|
import { MainMenu } from './menus/MainMenu'
|
|
import { NavigationPanel } from './menus/NavigationPanel'
|
|
import { PageMenu } from './menus/PageMenu'
|
|
import { StylePanel } from './menus/StylePanel'
|
|
import { Toolbar } from './menus/Toolbar'
|
|
|
|
interface Fixtures {
|
|
toolbar: Toolbar
|
|
stylePanel: StylePanel
|
|
actionsMenu: ActionsMenu
|
|
helpMenu: HelpMenu
|
|
mainMenu: MainMenu
|
|
pageMenu: PageMenu
|
|
navigationPanel: NavigationPanel
|
|
api: ReturnType<typeof makeApiFixture>
|
|
}
|
|
|
|
export type ApiFixture = {
|
|
[K in keyof EndToEndApi]: (
|
|
...args: Parameters<EndToEndApi[K]>
|
|
) => Promise<ReturnType<EndToEndApi[K]>>
|
|
}
|
|
|
|
function makeApiFixture(keys: { [K in keyof EndToEndApi]: true }, page: Page): ApiFixture {
|
|
const result = {} as any
|
|
|
|
for (const key of Object.keys(keys)) {
|
|
result[key] = (...args: any[]) => {
|
|
return page.evaluate(
|
|
([key, ...args]) => {
|
|
return (window as any).tldrawApi[key](...args)
|
|
},
|
|
[key, ...args]
|
|
)
|
|
}
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
const test = base.extend<Fixtures>({
|
|
toolbar: async ({ page }, use) => {
|
|
const toolbar = new Toolbar(page)
|
|
await use(toolbar)
|
|
},
|
|
stylePanel: async ({ page }, use) => {
|
|
const stylePanel = new StylePanel(page)
|
|
await use(stylePanel)
|
|
},
|
|
actionsMenu: async ({ page }, use) => {
|
|
const actionsMenu = new ActionsMenu(page)
|
|
await use(actionsMenu)
|
|
},
|
|
helpMenu: async ({ page }, use) => {
|
|
const helpMenu = new HelpMenu(page)
|
|
await use(helpMenu)
|
|
},
|
|
mainMenu: async ({ page }, use) => {
|
|
const mainMenu = new MainMenu(page)
|
|
await use(mainMenu)
|
|
},
|
|
pageMenu: async ({ page }, use) => {
|
|
const pagemenu = new PageMenu(page)
|
|
await use(pagemenu)
|
|
},
|
|
navigationPanel: async ({ page }, use) => {
|
|
const navigationPanel = new NavigationPanel(page)
|
|
await use(navigationPanel)
|
|
},
|
|
api: async ({ page }, use) => {
|
|
const api = makeApiFixture(
|
|
{
|
|
exportAsSvg: true,
|
|
exportAsFormat: true,
|
|
},
|
|
page
|
|
)
|
|
await use(api)
|
|
},
|
|
})
|
|
|
|
export default test
|