Skip to content

Commit

Permalink
[dx] Allow vscode to search inside md files by default (tldraw#3105)
Browse files Browse the repository at this point in the history
Before this PR all .md files were targeted by the `.ignore` file, which
has bitten me on a number of occasions since .md files often contain
valuable information (e.g. the vscode extensions docs). This PR
unignores .md files while still ignoring _generated_ .md files like our
changelogs, the api-report files, and the generated docs sections.

Additionally, the `yarn format` and `yarn lint` commands were configured
slightly differently, which was confusing, so I've unified those and
simplified the lint.ts script at the same time.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
  • Loading branch information
ds300 authored Mar 11, 2024
1 parent e527d7d commit 47a8589
Show file tree
Hide file tree
Showing 21 changed files with 78 additions and 123 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
**/next.config.js
**/setupTests.js
**/setupJest.js
**/jestResolver.js
apps/vscode/extension/editor
apps/examples/www
apps/docs/api-content.json
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/checks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,4 @@ jobs:
run: "yarn build | sed -E 's/^.*? ::/::/'"

- name: Pack public packages
run: "yarn lazy pack-tarball | sed -E 's/^.*? ::/::/'"
run: "yarn lazy pack-tarball | sed -E 's/^.*? ::/::/'"
4 changes: 1 addition & 3 deletions .github/workflows/publish-new.yml
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,4 @@ jobs:
secrets:
VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.VITE_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY: ${{ secrets.NEXTJS_TEMPLATE_REPO_SSH_DEPLOY_KEY }}
needs: [
deploy
]
needs: [deploy]
6 changes: 4 additions & 2 deletions .ignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ dist
.tsbuild-dev
.tsbuild-pub
.tsbuild
node\*modules
node_modules
*.d.ts
*.md
**/api-report.md
**/_archive
**/*.tsbuildinfo
yarn.lock
Expand All @@ -25,4 +25,6 @@ packages/tldraw/tldraw.css
**/*.js.map
**/*.api.json
apps/docs/utils/vector-db
apps/docs/content/releases/**/*
apps/docs/content/reference/**/*
packages/**/api
6 changes: 5 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
!**/pages/api/*
**/.tsbuild*
**/.next/*
*.mdx
**/_archive/*
apps/docs/api-content.json
apps/docs/content.json
Expand All @@ -18,6 +17,11 @@ content.json
apps/docs/utils/vector-db/index.json
**/gen/**/*.md

**/api-report.md
**/CHANGELOG.md
apps/docs/content/releases/**/*
apps/docs/content/reference/**/*

**/.vercel/*
**/.wrangler/*
**/.out/*
Expand Down
2 changes: 1 addition & 1 deletion .yarnrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ enableGlobalCache: false

enableInlineBuilds: true

nodeLinker: node-modules
nodeLinker: node-modules
1 change: 0 additions & 1 deletion apps/docs/content/docs/user-interface.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ Note that `onUiEvent` is only called when interacting with the user interface. I

See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for an example of how to customize tldraw's user interface.


## Overrides

The content of tldraw's menus can be controlled via the `overrides` prop. This prop accepts a [TLUiOverrides](/reference/tldraw/TLUiOverrides) object, which has methods for each part of the user interface, such as the `toolbar` or `keyboardShortcutsMenu`.
Expand Down
22 changes: 11 additions & 11 deletions apps/docs/content/getting-started/quick-start.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ order: 0

You can use the tldraw SDK to craft infinite canvas experiences for the web. It's perfect for collaborative whiteboards but you can use it for lots of other things, too.

By the end of this guide you will have made something that looks like this:
By the end of this guide you will have made something that looks like this:

<Embed className="article__embed--quickstart" src="https://examples.tldraw.com/develop" />

Expand Down Expand Up @@ -50,26 +50,26 @@ To render the Tldraw component
This will render a full screen canvas:
```javascript
import { Tldraw } from "tldraw";
import "./index.css";
import { Tldraw } from 'tldraw'
import './index.css'

export default function App() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
);
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
```
## Next Steps
Now that you have your canvas working, you may be wondering: what next?
Now that you have your canvas working, you may be wondering: what next?
You can try:
You can try:
- Giving the editor a makeover by [customizing the UI](/docs/user-interface)
- Adding your own [shapes](/docs/shapes) and [tools](/docs/tools)
- Providing collaboration using [multiplayer](https://github.com/tldraw/tldraw-yjs-example)
- Providing collaboration using [multiplayer](https://github.com/tldraw/tldraw-yjs-example)
We provide the above examples and more in our [examples section](/examples). Go build something creative and please do share it with us in our [#show-and-tell](https://discord.com/invite/SBBEVCA4PG) channel on Discord!
9 changes: 6 additions & 3 deletions apps/dotcom/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,21 +60,24 @@ You need to have a psql client [installed](https://www.timescale.com/blog/how-to

## Sending emails

We are using [Resend](https://resend.com/) for sending emails. It allows us to write emails as React components. Emails live in a separate app `apps/tl-emails`.
We are using [Resend](https://resend.com/) for sending emails. It allows us to write emails as React components. Emails live in a separate app `apps/tl-emails`.

Right now we are only using Resend via Supabase, but in the future we will probably also include Resend in our application and send emails directly.

The development workflow is as follows:

### 1. Creating / updating an email template
To start the development server for email run `yarn dev-email` from the root folder of our repo. You can then open [http://localhost:3333](http://localhost:3333) to see the result. This allows for quick local development of email templates.

To start the development server for email run `yarn dev-email` from the root folder of our repo. You can then open [http://localhost:3333](http://localhost:3333) to see the result. This allows for quick local development of email templates.

Any images you want to use in the email should be uploaded to supabase to the `email` bucket.

Supabase provides some custom params (like the magic link url) that we can insert into our email, [check their website](https://supabase.com/dashboard/project/faafybhoymfftncjttyq/auth/templates) for more info.

### 2. Generating the `html` version of the email
Once you are happy with the email template you can run `yarn build-email` from the root folder of our repo. This will generate the `html` version of the email and place it in `apps/tl-emails/out` folder.

Once you are happy with the email template you can run `yarn build-email` from the root folder of our repo. This will generate the `html` version of the email and place it in `apps/tl-emails/out` folder.

### 3. Updating the template in Supabase

Once you have the `html` version of the email you can copy it into the Supabase template editor. You can find the templates [here](https://supabase.com/dashboard/project/faafybhoymfftncjttyq/auth/templates).
3 changes: 1 addition & 2 deletions apps/dotcom/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down Expand Up @@ -46,5 +46,4 @@
<script type="module" src="./src/main.tsx"></script>
<noscript>You need to enable JavaScript to run tldraw. ✌️</noscript>
</body>

</html>
2 changes: 0 additions & 2 deletions apps/examples/src/examples/basic/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ category: basic
priority: 1
---



---

The `Tldraw` component provides the tldraw editor as a regular React component. You can put this component anywhere in your React project. In this example, we make the component take up the height and width of the container.
Expand Down
2 changes: 0 additions & 2 deletions apps/examples/src/examples/infer-dark-mode/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ category: basic
priority: 5
---



---

When the `Tldraw` component's `inferDarkMode` is true, the editor will infer its initial theme based on the user's system preferences, if available. You can toggle the dark mode by pressing `Command + /`.
2 changes: 0 additions & 2 deletions apps/examples/src/examples/peristence-key/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ category: basic
priority: 2
---



---

If the `persistenceKey` prop is provided to the `<Tldraw/>` component, the editor will persist its data locally under that key.
3 changes: 1 addition & 2 deletions apps/examples/src/examples/speech-bubble/customhandles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* Resize handles are normally on top, but We're going to give shape handles priority */
.tl-user-handles {
z-index: 101;

}
}
2 changes: 1 addition & 1 deletion apps/examples/src/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand Down
2 changes: 1 addition & 1 deletion apps/health-worker/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Health Worker

Accepts webhooks from [Updown](https://updown.io/), sends them to our Discord.
Accepts webhooks from [Updown](https://updown.io/), sends them to our Discord.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"build-package": "lazy build-package",
"preview-app": "VITE_PREVIEW=1 yarn dev-app",
"lint": "lazy lint",
"format": "prettier --write --cache \"**/*.{ts,tsx,js,jsx,json}\"",
"format": "prettier --write --cache '**/*.{yml,yaml,json,md,mdx,html,css,js,jsx,ts,tsx,cjs,mjs}'",
"typecheck": "yarn refresh-assets && tsx scripts/typecheck.ts",
"check-scripts": "tsx scripts/check-scripts.ts",
"check-tsconfigs": "tsx scripts/check-tsconfigs.ts",
Expand Down
74 changes: 15 additions & 59 deletions scripts/lint.ts
Original file line number Diff line number Diff line change
@@ -1,70 +1,26 @@
import ignore from 'ignore'
import * as path from 'path'
import { exec } from './lib/exec'
import { REPO_ROOT, readFileIfExists } from './lib/file'

const ESLINT_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx']
const PRETTIER_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx', 'json']
import { REPO_ROOT } from './lib/file'

async function main() {
const shouldFix = process.argv.includes('--fix')

const lsFiles = await exec('git', ['ls-files', '.'], {
processStdoutLine: () => {
// don't print anything
},
})

const filesByExtension = new Map<string, string[]>()
for (const file of lsFiles.trim().split('\n')) {
const ext = file.split('.').pop()
if (!ext) continue
let files = filesByExtension.get(ext)
if (!files) {
files = []
filesByExtension.set(ext.toLowerCase(), files)
}
files.push(file)
}

let prettierFiles = PRETTIER_EXTENSIONS.flatMap((ext) => filesByExtension.get(ext) ?? [])
let eslintFiles = ESLINT_EXTENSIONS.flatMap((ext) => filesByExtension.get(ext) ?? [])

const relativeCwd = path.relative(REPO_ROOT, process.cwd())

const prettierIgnoreFile = await readFileIfExists(path.join(REPO_ROOT, '.prettierignore'))
if (prettierIgnoreFile) {
prettierFiles = prettierFiles
.map((f) => path.join(relativeCwd, f))
.filter(ignore().add(prettierIgnoreFile).createFilter())
.map((f) => path.relative(relativeCwd, f))
}

const eslintIgnoreFile = await readFileIfExists(path.join(REPO_ROOT, '.eslintignore'))
if (eslintIgnoreFile) {
eslintFiles = eslintFiles
.map((f) => path.join(relativeCwd, f))
.filter(ignore().add(eslintIgnoreFile).createFilter())
.map((f) => path.relative(relativeCwd, f))
}

try {
await exec('yarn', [
'run',
'-T',
'prettier',
shouldFix ? '--write' : '--check',
'--cache',
...prettierFiles,
])
await exec('yarn', [
'run',
'-T',
'eslint',
'--report-unused-disable-directives',
shouldFix ? '--fix' : null,
...eslintFiles,
])
await exec('yarn', ['prettier', shouldFix ? '--write' : '--check', '--cache', relativeCwd], {
pwd: REPO_ROOT,
})
await exec(
'yarn',
[
'eslint',
'--report-unused-disable-directives',
'--no-error-on-unmatched-pattern',
shouldFix ? '--fix' : null,
relativeCwd,
],
{ pwd: REPO_ROOT }
)
} catch (error) {
process.exit(1)
}
Expand Down
10 changes: 5 additions & 5 deletions templates/nextjs/next.config.cjs
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
serverComponentsExternalPackages: ["@tldraw/tldraw"],
},
};
experimental: {
serverComponentsExternalPackages: ['@tldraw/tldraw'],
},
}

module.exports = nextConfig;
module.exports = nextConfig
24 changes: 12 additions & 12 deletions templates/vite/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
},
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': 'warn',
},
}
22 changes: 11 additions & 11 deletions templates/vite/index.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tldraw Vite template</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tldraw Vite template</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

0 comments on commit 47a8589

Please sign in to comment.